模拟滚动条效果

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

werch

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

阅读量149

点赞数

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115715859

版权

滚动条 CSS JavaScript 自定义样式交互设计

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>滚动条</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wp {
            width: 400px;
            height: 800px;
            margin: 30px auto;
            border: 1px #f00 solid;
            background: #ff0;
            position: relative;
            overflow: hidden;
        }

        #wp p {
            line-height: 40px;
            color: #666;
            font-size: 18px;
            padding: 20px;
        }

        #scroll {
            width: 16px;
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="wp">
        <!-- 内容 -->
        <p>呜呜呜呜呜呜呜呜无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无无我的大撒奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥sadDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDEWREQWWWWWWWW132QWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW岁数大发奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥范德萨的范德萨发大水发地方阿斯蒂芬第三方的说法发顺丰沙发阿福阿福啊孙菲菲爱的色放范德萨 阿福大师傅沙发是阿福发的说法沙发 奥德赛发送浮点数法第三代发放大范德萨发啊发第三方第三方撒大浮点数范德萨奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥噢噢噢噢哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦噢噢噢噢噢噢噢噢哦哦哦哦哦哦哦哦哦哦哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或斤斤计较军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿</p>
        <!-- 滚动条 -->
        <div id="scroll"></div>
    </div>
</body>

</html>
<script type="text/javascript">
    var p = document.querySelector('#wp p');
    var wp = document.querySelector('#wp');
    var scroll = document.querySelector('#scroll');
    var h = 0;
    var ph = p.clientHeight;
    var wph = wp.clientHeight;
    // wph/ph=h/wph  短的比长的，的比例相等
    h = wph * wph / ph;
    scroll.style.height = h + 'px';

    //内容最大可移动距离
    var maxCont = ph - wph;

    //拖动
    scroll.onmousedown = function () {
        var cy = event.clientY;
        var top = parseInt(getComputedStyle(this).top);
        document.onmousemove = function () {
            var my = event.clientY;
            var t = top + my - cy;

            (t <= 0) && (t = 0);
            var maxH = wph - h;
            (t >= maxH) && (t = maxH);

            scroll.style.top = t + 'px';
            //p的最大可移动距离/滚动条的最大可移动距离=p的实时平移高度/滚动条的实时平移距离
            //maxCont/maxH=num/t
            var num = -maxCont * t / maxH;

            //改变内容位置   
            p.style.transform = 'translateY(' + num + 'px)';

        };
        return false;
    };

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

    addMousewheel(wp);
    // 兼容写法
    function addMousewheel(obj) {
        if (!obj) {
            return;
        }
        //火狐
        obj.addEventListener('DOMMouseScroll', scrollFun);
        //谷歌
        obj.onmousewheel = scrollFun;

        //公共方法
        var dir;

        function scrollFun(ev) {
            var t = scroll.offsetTop;
            var ev = event || ev;

            if (ev.wheelDelta) { //谷歌
                dir = ev.wheelDelta > 0 ? true : false;
            } else { // 火狐
                dir = ev.detail > 0 ? false : true;
            }

            if (dir) {
                t -= 5;
            } else {
                t += 5;
            }

            (t <= 0) && (t = 0);
            var maxH = wph - h;
            (t >= maxH) && (t = maxH);

            scroll.style.top = t + 'px';

            var num = -maxCont * t / maxH;

            //改变内容位置
            p.style.transform = 'translateY(' + num + 'px)';
        }
    }
</script>