Question

我使用以下代码来阻止DIV元素上的页面滚动

<script>
$(document).ready(function(){
    $('#stop-scroll').on( 'mousewheel DOMMouseScroll', function (e) { 

      var e0 = e.originalEvent;
      var delta = e0.wheelDelta || -e0.detail;

      this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
      e.preventDefault();  

    });
});
</script>

但是如果计数器达到某个值（例如4），我想再次启用滚动，鼠标滚动时计数器将继续增加1。如果鼠标向上滚动，计数器将减1，当计数器达到0时，将再次启用滚动禁用，用户可以向上滚动页面。

Answer 1

看到你的问题我已经添加了一个代码，现在根据特定变量的特定值启用滚动。

同样，你也可以使用你选择的条件并实现相同的逻辑。

$(document).ready(function() {
  $('#stop-scroll').on('mousewheel DOMMouseScroll', function(e) {
    var e0 = e.originalEvent;
    var delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += (delta < 0 ? 1 : -1) * 30;

    if (delta <= -240) {
      return true;
    } else {
      e.preventDefault();
    }
  });
});

#stop-scroll {
  height: 400px;
  width: 100%;
  background: #6a6a6a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stop-scroll"></div>

希望所附的代码可以帮助您理解。 如果仍然存在，您会有任何疑问随时发表评论。

Answer 2

您可以使用css规则overflow来控制HTML元素的滚动行为在下面的示例中，我使用规则overflow-y来控制元素在Y方向上的滚动行为。为它分配值auto允许浏览器自己决定是否认为容器需要滚动条。

.container {
  overflow-y: auto;
}

<ul class="container" style="height: 50px; background-color: orangered;">
  <li>This</li>
  <li>list</li>
  <li>will</li>
  <li>need</li>
  <li>scrolling!</li>
</ul>

<ul class="container" style="height: 100px; background-color: skyblue;">
  <li>This</li>
  <li>list</li>
  <li>won't</li>
  <li>need</li>
  <li>scrolling!</li>
</ul>

如何在DIV元素上滚动时禁用页面滚动，并在计数器达到某个值时启用滚动

2 个答案: