单击按钮时停止并恢复滚动页面

Stop and resume scroll page on button click

本文关键字：恢复 滚动 按钮 单击      更新时间：2023-09-26

我有一个带有简单演示的查询，我想在单击button1停止滚动，然后在button2然后恢复滚动。我不知道我是怎么做到的？

小提琴here

.HTML：

<input type='button' value='stop scroll' id='btn1'>
    <input type='button' value='resume scroll' id='btn2'>
        <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ... <div>

你想要这个吗？

$(document).ready(function(){
    var allowScroll = true;
    $("div").on('mousewheel DOMMouseScroll',function(e){ 
       if (!allowScroll){
          e.preventDefault();
       }
    });
    $('#btn1').click(function(){
       allowScroll = false;
    });
    $('#btn2').click(function(){
       allowScroll = true;
    });
});

演示

我认为您可以向"鼠标滚轮"事件添加一个处理程序（使用jquery-mousewheel进行浏览器支持）并执行以下操作：

$('#my_elem').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    event.preventDefault(); //to prevent the default action
    // or $("html, body").scrollTo(0);
});
相关文章：