javascript - 如何禁用除html网页中选定的div之外的整个页面的滚动

Question

我在 html 网页中使用滚动，但问题是它适用于整个页面，但我希望它适用于我调用滚动功能的 div 这是我的代码

<script>
var startPos;

function init(){
  var scrollArea = document.getElementById('holder');
  scrollArea.addEventListener('touchstart', function(event){
    touchstartHandler(event);
  }, false);

  scrollArea.addEventListener('touchmove', function(event){
    touchmoveHandler(event);
  }, false);

  scrollArea.addEventListener('touchend', function(event){
    touchendHandler(event);
  }, false);
}

function touchstartHandler(e){
  startPos = e.touches[0].pageY;
}

function touchmoveHandler(e){
  var touch = e.touches[0];
  var targetBox = e.currentTarget.getElementsByTagName("div")[0];
  e.preventDefault();

  var fingerMoved = startPos - touch.pageY;
  startPos = touch.pageY;

  targetBox.scrollTop = targetBox.scrollTop + fingerMoved;
}
</script>

Answer 1

一个简单的解决方案，切断整个页面的滚动。

设置 CSS：

html, body{overflow:hidden;}
/* or */
html, body{overflow-y: hidden;}

这将完全摆脱您的页面滚动。然后只需在页面上设置要滚动的元素即可滚动。老实说，您甚至不需要 javascript，但 javascript 确实提供了更好的功能。