javascript - 如何在 DIV 元素上滚动时禁用页面滚动并在计数器达到特定值时启用滚动

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>

希望附加的代码能帮助您理解。如果仍然有任何疑问，请随时发表评论。