多点触控问题上的多个垂直可滚动 div

问题描述

我尝试在多点触控应用程序上垂直滚动 2 个文本字段，每个文本字段都适用，但一旦我尝试滚动两个文本字段，只有第一个触摸的文本字段有效。

也许是自定义滚动条的示例？

这是一个例子，请在多点触控上测试。

#window {
  height: 200px;
  border: 1px black solid;
}

.window {
  height: 200px;
  border: 1px black solid;
}


.scrollable-content {
  height: 180px;
  overflow: auto;
  background-color: blue;
}

#footer {
  height: 20px;
  background-color: green;
}

<div class="window">

  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>

  

</div>
<div class="window">
  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
</div>

解决方法

如果您想始终同步两个 Div，您可以监听两个 Div 的 scroll 事件，然后将目标的 scrollTop 复制到另一个 div。

var divs = document.querySelectorAll('.scrollable-content');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('scroll',function(event) {
    var scrollers = document.querySelectorAll('.scrollable-content');
    for (var i = 0; i < scrollers.length; i++) {
      if ( scrollers[i].isSameNode( event.target ) === false ) {
      scrollers[i].scrollTop = event.target.scrollTop;
      }
    }
  });
}

#window {
  height: 200px;
  border: 1px black solid;
}
.window {
  height: 200px;
  border: 1px black solid;
}
.scrollable-content {
  height: 180px;
  overflow: auto;
  background-color: blue;
}
#footer {
  height: 20px;
  background-color: green;
}

<div class="window">
  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
</div>
<div class="window">
  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
</div>

如果您只想在双击时滚动第二个 div，事情会变得稍微复杂一些，假设您希望两个元素独立于彼此的方向和距离滚动。

简而言之，您最终将跟踪 touchstart 事件，确定它是否源自您要滚动的 div，记下事件的 Y 位置，然后在 touchmove 事件，您必须计算差异并相应地调整 Div 的 scrollTop。

一种方法是这样的；

function isDescendant(child,queryString) 
{
    if ( child.matches( queryString ) ) {
        return child;
    }
    var parent = child.parentNode;
    while( parent.matches ) {
        if ( parent.matches( queryString ) ) {
            return parent;
        }
        parent = parent.parentNode;
    }
    return false;
}

var touchedTargets = [];
var touchedData = [];


document.body.addEventListener('touchstart',function( event ){
    var insideTarget = isDescendant( event.target,".scrollable-content" );
    if ( insideTarget ) {
        var index = touchedTargets.indexOf( event.target );
        if ( index < 0 ) {
            var data = {x:0,y:0,scroller:insideTarget};
            for ( var i=0; i<event.touches.length; i++ ) {
                if ( event.touches[i].target.isSameNode( event.target ) ) {
                    data.x = event.touches[i].clientX;
                    data.y = event.touches[i].clientY;
                }
            }
            touchedTargets.push( event.target );
            touchedData.push( data );
        }
    }
});
document.body.addEventListener('touchend',function( event ){
    var index = touchedTargets.indexOf( event.target );
    if ( index > -1 ) {
        touchedTargets.splice( index,1 );
        touchedData.splice( index,1 );
    }
});
document.body.addEventListener('touchmove',function( event ){
    for ( var i=0; i<event.touches.length; i++ ) {
        var index = touchedTargets.indexOf( event.touches[i].target );
        if ( index > -1 ) {
            touchedData[index].scroller.scrollTop = touchedData[index].scroller.scrollTop + ( event.touches[i].clientY - touchedData[index].y );
            touchedData[index].y = event.touches[i].clientY;
            event.preventDefault();
        }
    }
},{ passive: false });

#window {
  height: 200px;
  border: 1px black solid;
}
.window {
  height: 200px;
  border: 1px black solid;
}
.scrollable-content {
  height: 180px;
  overflow: auto;
  background-color: blue;
}
#footer {
  height: 20px;
  background-color: green;
}

<div class="window">
  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
</div>
<div class="window">
  <div class="scrollable-content">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
</div>

在 touchstart 上，代码会检查 event.target 是否实际上是 .scrollable-content 元素，或者在其内部。如果是这种情况，它将在 event.touches 列表中查找对应的触摸，触摸的 clientX、clientY 和 .scrollable-content 元素保存在touchedData 数组。 event.target 保存在 touchedTargets 数组中。

在touchend 上，代码会检查event.target 是否在我们的touchedTargets 数组中，如果是，则删除该条目。

在 touchmove 上，代码循环遍历 event.touches 列表并检查它们的目标是否在 touchedTargets 数组内。如果是这种情况，它将计算该特定 .scrollable-content 的新 scrollTop 并更新它。

google-chrome html interact.js javascript multi-touch

多点触控问题上的多个垂直可滚动 div

问题描述

解决方法

相关问答