时间戳

首页 > 解决方案 > 滚动“水平滚动的 div 元素”也会使父滚动

javascript - 滚动“水平滚动的 div 元素”也会使父滚动

问题描述

我已经实现了一个 TabbarController，用户可以在其中滑动不同的选项卡。我通过添加“touchstart”、“touchmove”和“touchend”事件来实现这一点。所有选项卡都有一个水平滚动的元素，当滚动时会在父级上调用“touchmove”，从而导致父级和子级同时滚动。是否可以将滚动限制为子项/限制触摸事件从子项传递给父项？

我尝试在父 div 上使用 'overflow:hidden' 并尝试在触摸事件上使用 'prevendefault()'。

标签： javascripthtmlcssreactjs

解决方案

我终于写了一个解决方案来解决我的问题。当事件回调传播回添加侦听器的父元素时，我遍历 DOM 对象以检查子元素的可滚动区域。如果当前触摸的子项具有可滚动内容，则不会为父项处理触摸事件。

var element:HTMLElement = event.target;
var cancel:boolean = false;

while (element && element.parentElement){
      if (element.scrollWidth > element.clientWidth){
          cancel = true;
          break;
      }
          element = element.parentElement;
}

推荐阅读