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

Question

我尝试在多点触控应用程序上垂直滚动 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>

Answer 1

如果您想始终同步两个 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 事件中，您必须计算差异并相应地调整 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 并更新它。

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

multiple vertical scrollable divs on multitouch problem

html

javascript

google-chrome

multi-touch

interact.js