我正在使用以下代码来防止页面在 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 时,滚动禁用将再次启用,用户可以向上滚动页面。
最佳答案
看到你的问题,我添加了一个代码,现在基于特定变量的特定值启用滚动。
同样,您也可以使用您选择的条件并实现相同的逻辑。
$(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>
希望附加的代码能帮助您理解。 如果仍然有任何疑问,请随时发表评论。
关于javascript - 如何在 DIV 元素上滚动时禁用页面滚动并在计数器达到特定值时启用滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47413029/