自定义滚动条

最新推荐文章于 2024-09-25 16:21:18 发布

sjy7329

最新推荐文章于 2024-09-25 16:21:18 发布

阅读量184

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sunjynyue/article/details/85249802

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <style>
        *{
            margin:0;padding:0;
        }
        #div1{
            width:500px;
            height:20px;
            background:#eee;
            margin:50px auto 0;
            border-radius:10px;
            position: relative;
        }
        #div2{
            width:100px;
            height:20px;
            background: #dd6e1e;
            border-radius:10px;
            position: absolute;
            left:0;
            top:0;
        }
        #div3{
            width:500px;
            height:300px;
            border:1px #ddd solid;
            margin:30px auto 0;
            border-radius:10px;
            overflow: hidden;
            position:relative;
        }
        #div4{
            position:absolute;
        }
        #div4 p{
            text-indent:1em;
            margin:10px;
            color:#666;
            font-size:14px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3">
    <div id="div4">
        <p>许多时候，我们早已不去回想，当每一个人来到地球上时，只是一个赤裸的婴儿，除了躯体和灵魂，上苍没有让人类带来什么身外之物。等到有一天，人去了，去的仍是来的样子，空空如也。这只是样子而已。事实上，死去的人，在世上总也留下了一些东西，有形的，无形的，充斥着这本来已是拥挤的空间。</p>
        <p>曾几何时，我们不再是婴儿，那份记忆也遥远得如同前生。回首看一看，我们普普通通的活了半生，周围已引出了多少牵绊，伸手所及，又有多少带不去的东西成了生活的一部分，缺了它们，日子便不完整。</p>
        <p>许多人说，身体形式都不重要，境由心造，一念之间可以一花一世界，一沙一天堂</p>
        <p>这是不错的，可是在我们那么复杂拥挤的环境里，你的心灵看见过花吗？只一朵，你看见过吗？我问你的，只是一朵简单的非洲菊，你看见过吗？我甚而不问你玫瑰。</p>
        <p>不了，我们不再谈沙和花朵，简单的东西是最不易看见的，那么我们只看看复杂的吧！</p>
        <p>唉，连这个，我也不想提笔写了。</p>
        <p>在这样的时代里，人们崇拜神童，没有童年的儿童，才进得了那窄门。人类往往少年老成，青年迷茫，中年喜欢将别人的成就与自己相比较，因而觉得受挫，好不容易活到老年仍是一个没有成长的笨孩子。我们一直粗糙的活着，而人的一生，便也这样过去了。我们一生复杂，一生追求，总觉得幸福的遥不可企及。不知那朵花啊，那粒小小的沙子，便在你的窗台上。你那么无事忙，当然看不见了。对于复杂的生活，人们怨天怨地，却不肯简化。心为形役也是自然，哪一种形又使人的心被役得更自由呢？</p>
        <p>我们不肯放弃，我们忙了自己，还去忙别人。过分的关心，便是多管闲事，当别人拒绝我们的时候，我们受了伤害，却不知这份没趣，实在是自找的。</p>
        <p>对于这样的生活，我们往往找到一个美丽的代名词，叫做“深刻”。简单的人，社会也有一个形容词，说他们是笨的。一切单纯的东西，都成了不好的。</p>
        <p>恰好我又远离了家国。到大西洋的海岛上来过一个笨人的日子，就如过去许多年的日子一样。</p>
    </div>
</div>
<script>
    div2.οnmοusedοwn=function(e){
        var ev=e||event;
        var l=ev.clientX-this.offsetLeft;
        document.οnmοusemοve=function(e){
            var ev=e||event;
            var needL=ev.clientX-l;
            //不超过左边距离
            needL<0?needL=0:needL;
            //不超过右边距离
            var maxL=div1.offsetWidth-div2.offsetWidth;
            needL>maxL?needL=maxL:needL;
            //计算滚动比例
            var pre=div2.offsetLeft/maxL;

            div2.style.left=needL+'px';
            div4.style.top=-div3.offsetHeight*pre+'px';

        };
        document.οnmοuseup=function(){
            document.οnmοusemοve=document.οnmοuseup=null;
        };
        return false;
    }
</script>
</body>
</html>