主页 / 问题 / 951651
Accepted
Jack
Asked:2020-03-03 14:54:49 +0000 UTC2020-03-03 14:54:49 +0000 UTC

子组件使用overflow-y:scroll属性滚动时如何防止页面滚动？

  • 772

有一个页面，就有一个弹窗组件。内容组件中有很多内容。设置最大高度：95vh 和溢出-y：滚动。但有时，当组件的滑块处于其极限位置时，整个页面开始滚动。但我不想。试过 onScroll={(e)=>e.stopPropagination()} - 没有帮助。怎样成为？

javascript

1 个回答

  1. Best Answer

    可以以多种方式执行页面滚动。下面是一个防止使用鼠标滚轮（或鼠标替换设备）滚动的示例。如果到达块的顶部并且轮子正在向上旋转，或者如果已经到达块的底部并且轮子正在向下旋转，则取消默认操作。同样，您可以防止块使用键盘滚动或在触摸屏上滑动。

    var block = document.getElementById('cc1');
block.addEventListener('wheel', function(event) {
  if (block.scrollTop == 0 && event.deltaY < 0 || block.scrollTop + block.clientHeight == block.scrollHeight && event.deltaY > 0) {
    event.preventDefault();
  }
});
    • 1

相关问题