js 双击页面 开始/暂停 页面滚动

当网页中有长篇文章时，浏览起来就比较吃劲了，想想一边忙着拖动滚动条，一边忙着浏览，确实挺累人的。为了客人能够轻松的浏览，我们可以使用script代码实现网页的自动滚屏，当双击网页的时候，网页将会自动向下滚动，再次单击时滚动停止。

这种方法适用于大多数浏览器，但需要注意的是，直接控制滚动条的滚动在某些浏览器中可能不被支持，特别是对于非用户触发的滚动行为（如平滑滚动）。但是，我们可以使用定时器来模拟暂停和恢复滚动。

<!DOCTYPE html>
<html>
 <head> 
  <title>双击滚动代码</title> 
 </head> 
 <body> 
 
 <button id="a1">-</button>
 <input type="number" id="t1" disabled="disabled" value="0" style="text-align:center;">
 <button id="j1">+</button>
 <hr/>
 <hr/>
 <div style="height:1500px;">
 </div>
 
    <script>
        
var currentpos,timer;
function initialize()
{
    timer=setInterval("scrollwindow()",30);
}

function sc(){
    clearInterval(timer);
}

function scrollwindow(){
    if(document.body.scrollTop){//加了DTD头时,document.body.scrollTop值始终为0,在此判断一下
        currentpos=document.body.scrollTop;
        window.scroll(0,++currentpos);
            if (currentpos != document.body.scrollTop){
                sc();
            }
    }
    else{
        currentpos=document.documentElement.scrollTop;
            window.scroll(0,++currentpos);
            if (currentpos != document.documentElement.scrollTop){
                sc();
            }
    }
}
 
document.onmousedown=sc
document.ondblclick=initialize
    
    </script>
 </body>
</html>

 

 

2026-05-05 19:07:35【出处】：https://www.cnblogs.com/xinlvtian/p/8482801.html

2026-05-05 19:07:35【出处】：https://blog.csdn.net/polloo2012/article/details/145342417

=======================================================================================

个人使用

根据上面的内容进行优化。可以直接在网页的console运行

<script>
        
    var currenTpos,scTimer;
    function scrollwindow(){
        //加了DTD头时,document.body.scrollTop值始终为0,在此判断一下
        currenTpos=document.body.scrollTop;
        currenTpos=document.documentElement.scrollTop;
        window.scroll(0,++currenTpos);
        if (currenTpos != document.documentElement.scrollTop)
            clearInterval(scTimer),scTimer=0;
    }
    //在页面上绑定双击事件执行，滚动速度，数值越大，滚动越慢
    document.ondblclick=()=>{scTimer=scTimer?clearInterval(scTimer):setInterval("scrollwindow()",90);}

</script>

 

posted on 2026-05-05 19:08  jack_Meng  阅读(27)  评论(0)    收藏  举报

导航