JavaScript自定义滚动条

最新推荐文章于 2024-03-27 10:30:00 发布

~柯茜茜~

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量292

点赞数 2

分类专栏：原生js web大前端文章标签： js 滚动条

本文链接：https://blog.csdn.net/qq_43188340/article/details/101293940

版权

web大前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

原生js

2 篇文章 0 订阅

订阅专栏

浏览器自带的滚动条样式比较单一，下面是利用原生js实现的滚动条，可以换成自己喜欢的样式。

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            overflow: hidden;
            background: pink;
            position: relative;
        }

        #content {
            background: yellowgreen;
            color: #fff;
            width: 280px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #scrollBox {
            width: 18px;
            height: 298px;
            background: greenyellow;
            border: 1px solid yellow;
            position: absolute;
            right: 0;
            top: 0;
        }

        #scroll {
            width: 20px;
            height: 20px;
            background: yellow;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var scroll = document.getElementById('scroll');
            var sBox = document.getElementById('scrollBox');
            var box = document.getElementById('box');
            var content = document.getElementById('content');
            //计算可滚动距离
            var cHight = content.offsetHeight - box.offsetHeight;//隐藏内容距离
            var sHight = sBox.offsetHeight - scroll.offsetHeight;//滚动距离
            //计算比例
            var scale = cHight / sHight;
            //调用拖拽函数
            darg(scroll, content, scale);
            box.onmousewheel = function (ev) {
                var ev = window.event || ev;
                if (ev.wheelDelta == -120) {
                    if (parseInt(content.style.top) <= -cHight) {
                        content.style.top =-cHight+ 'px';
                        scroll.style.top =sHight+ 'px';
                    } else {
                        content.style.top = content.offsetTop -5  + 'px';
                        scroll.style.top = scroll.offsetTop + (5/ scale) + 'px';
                    }
                }else{
                    if (parseInt(content.style.top) >= 0) {
                        content.style.top =0+ 'px';
                        scroll.style.top =0+ 'px';
                    } else {
                        scroll.style.top = scroll.offsetTop - (5/ scale) + 'px';
                        content.style.top = content.offsetTop +5+ 'px';
                    }
                }
            }

        }
    </script>
</head>

<body>
    <div id="box">
        <div id="content">
            易烊千玺（JacksonYee，2000年11月28日-），生于湖南怀化， 中国内地男歌手、舞者、演员，TFBOYS组合成员。 2013年8月6日， 以TFBOYS组合形式出道；2016年获第16届音乐风云榜年度盛典最受 欢迎综艺节目偶像奖、最受欢迎新偶像，2016亚洲演员评选亚洲十大
            演员奖。2017年，获五四优秀青年称号。2018年8月，获得亚洲新歌 榜度盛典年度十大金曲奖。12月4日，获第十五届MAHB年度先生盛典年度偶像奖。 易烊千玺（JacksonYee，2000年11月28日-），生于湖南怀化，
            中国内地男歌手、舞者、演员，TFBOYS组合成员。 2013年8月6日， 以TFBOYS组合形式出道；2016年获第16届音乐风云榜年度盛典最受 欢迎综艺节目偶像奖、最受欢迎新偶像，2016亚洲演员评选亚洲十大 演员奖。2017年，获五四优秀青年称号。2018年8月，获得亚洲新歌
            榜度盛典年度十大金曲奖。12月4日，获第十五届MAHB年度先生盛典年度偶像奖。 易烊千玺（JacksonYee，2000年11月28日-），生于湖南怀化， 中国内地男歌手、舞者、演员，TFBOYS组合成员。 2013年8月6日，
            以TFBOYS组合形式出道；2016年获第16届音乐风云榜年度盛典最受 欢迎综艺节目偶像奖、最受欢迎新偶像，2016亚洲演员评选亚洲十大 演员奖。2017年，获五四优秀青年称号。2018年8月，获得亚洲新歌 榜度盛典年度十大金曲奖。12月4日，获第十五届MAHB年度先生盛典年度偶像奖。
        </div>
        <div id="scrollBox">
            <div id="scroll"></div>
        </div>
    </div>
</body>
<script src="js/drag.js"></script>

</html>

drag.js：

（由于js文件是原本就封装好的，内容较多，可以精简）

function darg(obj,content,scale) {
    //鼠标按下事件
    obj.onmousedown = function (ev) {
        var ev = window.event || ev;
        //屏幕的可视宽高   作控制拖拽范围用
        var cW = obj.parentNode.offsetWidth;
        var cH = obj.parentNode.offsetHeight;
        //元素的占位宽高
        var bW = obj.offsetWidth;
        var bH = obj.offsetHeight;
        //计算鼠标按下的位置
        var disX = ev.clientX - obj.offsetLeft;
        var disY = ev.clientY - obj.offsetTop;
        //添加移动事件
        document.onmousemove = function (ev) {
            var ev = window.event || ev;
            //计算鼠标移动的距离
            var x = ev.clientX - disX;
            var y = ev.clientY - disY;
            content.style.top=-y*scale+'px';
            //判断可拖拽的范围，限定在屏幕可视区域
            if (x < 0) {
                obj.style.left = '0px';
                //cW-bW计算的是obj的left属性可设置的最大值，大于它的时候就会超出可视区域
            } else if (x > cW - bW) {
                obj.style.left = cW - bW + 'px';
            } else {
                obj.style.left = x + 'px';
            }
            if (y < 0) {
                obj.style.top = '0px';
                content.style.top='0px';
                //top同left计算原理一样
            } else if (y > cH - bH) {
                content.style.top=-(cH - bH)*scale+'px';
                obj.style.top = cH - bH + 'px';
            } else {
                obj.style.top = y + 'px';
            }
            return false;
        }
        //鼠标抬起事件
        document.onmouseup = function () {
            //当鼠标抬起时，清除这两个事件
            document.onmousemove = document.onmouseup = null;
        }
    }
}

~柯茜茜~

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
JavaScript自定义滚动条

浏览器自带的滚动条样式比较单一，下面是利用原生js实现的滚动条，可以换成自己喜欢的样式。html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
复制链接

扫一扫