利用scrollBy快速阅读的功能

231 阅读1分钟
让滚动条滚动
window上有三个方法----scroll(),/scrollTo(),一样的不累加距离------/scrollBy();累加滚动距离
将x,y坐标传入,实现让滚动轮滚动到当前位置
<div style="width:300px;height:300px; border:2px solid black; position:relative; top:100px;left:100px;">
            
     <div class="demo" style="width:100px;height:100px; position:absolute; top:100px;left:100px;background-color:red;"></div>
</div>

粘贴字过来看效果
〔小考据〕贫道与贫僧 〔5〕学鸿儒科

<div style="width:100px;height:100px;background-color:skyblue;color:tomato;font-size:40px;text-align:center;line-height:100px;
position:fixed;bottom:200px;right:50px;border-radius:50%;opacity:0.5;">read</div>
<div style="width:100px;height:100px;background-color:greenyellow;color:whitesmoke;font-size:40px;text-align:center;line-height:100px;
position:fixed;bottom:50px;right:50px;border-radius:50%;opacity:0.5;">stop</div>

<script type="text/javascript">

var start=document.getElementsByTagName('div')[0];
        var stop = document.getElementsByTagName('div')[1];
        var timer = 0;
        var key = true//不让它加速
        start.onclick=function(){
            if(key){
                  timer=setInterval(function(){
                  window.scrollBy(0,10);
               },200);
               key=false;
            }
        }
        stop.onclick = function(){
            clearInterval(timer);
            key=true;
        }

5设置滚动条滚动-06-18 210312.jpg scroll-06-18 200627.jpg

scrollBy-06-18 200851.jpg

getScrollOffset-06-17 225318.jpg