js实现简易模拟滚动条

最新推荐文章于 2021-09-19 13:27:20 发布

della_uii

最新推荐文章于 2021-09-19 13:27:20 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签：模拟滚动条

本文链接：https://blog.csdn.net/Della_UI/article/details/53055995

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 30px; 
                height: 500px; 
                background: #000000; 
                position: absolute; 
                top: 10px;
                left: 10px;
            }
            #div2{
                width: 30px; 
                height: 30px; 
                background: blueviolet; 
                position: absolute; 
                top: 0; 
                left: 0;
            }
            #div3{
                width: 350px;
                height: 498px;
                border: 1px solid #333333;
                position: absolute;
                left: 50px;
                top: 10px;
                overflow: hidden;
            }
            #div4{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>   
        </div>
        <div id="div3">
            <div id="div4">
                <p>Theday！“特朗普”被烧了</p>
                <p>各地雾霾来袭 朦朦胧胧过周末</p>
                <p>等活儿 路旁劳务市场的冷暖人生</p>
                <p>热点视频娱 乐拍 客</p>
                <p>杭州93岁鞋垫奶奶被双截棍打成重伤 </p>
                <p>三星洗衣机爆炸伤9人 召回280万台</p>
                <p>国人在韩疯狂扫货 机场满地化妆品</p>
                <p>温州特大贩婴案23人获刑女子爱犬被撞逼司机下跪留学生</p>
                <p>频要钱父亲被骗黑龙江雪后公路成溜冰场黑店店员真钱秒变假钞山东疫苗案已批捕324人</p>
                <p>把民营资本逐出义务教育属国进民退</p>
                <p>请用法治精神平息贾敬龙案死刑争议</p>
                <p>Theday！“特朗普”被烧了</p>
                <p>各地雾霾来袭 朦朦胧胧过周末</p>
                <p>等活儿 路旁劳务市场的冷暖人生</p>
                <p>热点视频娱 乐拍 客</p>
                <p>杭州93岁鞋垫奶奶被双截棍打成重伤 </p>
                <p>三星洗衣机爆炸伤9人 召回280万台</p>
                <p>国人在韩疯狂扫货 机场满地化妆品</p>
                <p>温州特大贩婴案23人获刑女子爱犬被撞逼司机下跪留学生</p>
                <p>频要钱父亲被骗黑龙江雪后公路成溜冰场黑店店员真钱秒变假钞山东疫苗案已批捕324人</p>
                <p>把民营资本逐出义务教育属国进民退</p>
                <p>请用法治精神平息贾敬龙案死刑争议</p>
            </div>
        </div>
        <script type="text/javascript">

            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var oDiv3=document.getElementById("div3");
            var oDiv4=document.getElementById("div4");
            var iMax=oDiv1.offsetHeight-oDiv2.offsetHeight;

            oDiv2.onmousedown=function(ev){
                var ev = ev || event;
                var disY=ev.clientY-this.offsetTop;

                if (oDiv2.setCapture) {
                    oDiv2.setCapture();
                }

                document.onmousemove=function(ev){
                    var ev = ev || event;
                    var T=ev.clientY-disY;

                    if (T<0) {
                        T=0;
                    }else if(T>iMax){
                        T=iMax;
                    }

                    oDiv2.style.top=T+'px';
                    oDiv4.style.top=( oDiv3.clientHeight - oDiv4.offsetHeight ) * T/iMax + 'px';
                }

                document.onmouseup=function(){
                    document.onmousemove=document.onmouseup=null;

                    if (oDiv2.releaseCapture) {
                        oDiv2.releaseCapture();
                    }
                }

                return false;
            }

        </script>
    </body>
</html>