隐藏浏览器默认滚动条和自定义滚动条样式

最新推荐文章于 2024-04-12 11:22:07 发布

GGGGGG.enough

最新推荐文章于 2024-04-12 11:22:07 发布

阅读量1.5k

点赞数 1

文章标签： javascript css html5 css3 jquery

本文链接：https://blog.csdn.net/ggbee_/article/details/107393367

版权

隐藏浏览器默认滚动条

Chrome浏览器和移动端可以使用-webkit-scrollbar 隐藏浏览器自带的滚动条；

 ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
 }

而火狐和IE可以通过给溢出的盒子嵌套一个父盒子，设置溢出部分auto显示，然后使其宽度增加17px（浏览器默认占据内容的宽度为17px）然后给包裹内容的父盒子在设置overflow：hidden；隐藏溢出的滚动条部分；就可以将默认滚动条样式不可见了。

原理如图所示：

//css样式
<style>
    .container {
    width: 230px;
    height: 452px;
    background-color: #ff4a00;
    opacity: 0.8;
    overflow: hidden;  
} 

.wrap {
    height: 452px;
    /* width: 230px; */
    width: 247px;
    overflow-y: auto;
}

.content { 
    width: 230px;
    height: 524px;  
}
 </style>

//html结构
 
<div class="container">
    <div class="wrap">
        <div class="content">sss</div>
    </div>
</div>

自定义滚动条的实现原理：给设置overflow：auto的盒子绑定滚动事件；然后进行数学计算；然后设置拖拽滚动条设置对应的绑定事件，滚动条.onmousedown，document.onmousemove ，document.onmouseup 三个事件计算出滚动条拖拽的距离；距离必须大于0；小于被滚动条滚动的最大距离；然后转为内容被卷曲的高度；注意：此处内容被卷曲的高度，是对包裹内容的盒子进行操作，将它设置为相对定位，将卷曲的距离设置top值，即整个盒子相对于原来的位置向上移动；完成拖拽滚动的效果。

原理图：

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义实现滚动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .container {
            position: relative;
            margin-left: 100px;
            margin-top: 20px;
            width: 230px;
            height: 452px;
            background-color: #ff4a00;
            opacity: 0.8;
            overflow: hidden;
        }


        .wrap {
            width: 247px;
            height: 452px;
            background-color: violet;
            overflow: auto;
        }

        .content {
            position: relative;
            width: 230px;
            height: 524px;
            background-color: steelblue;
        }

        .content li {
            box-sizing: border-box;
            width: 100%;
            height: 25%;
            background-color: steelblue;
            border-top: 2px solid #ccc;
        }

        .autoProgress {
            position: absolute;
            right: 0;
            top: 0;
            width: 8px;
            height: 310px;
            background-color: #ff4600;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrap">
            <ul class="content">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <!-- 自定义滚动条 -->
        <div class="autoProgress"></div>
    </div>


    <script>
        var content = document.querySelector('.wrap');
        var box = document.querySelector('.content');
        var autoProgress = document.querySelector('.autoProgress');
        // 包裹被卷曲的内容的盒子触发   最多被卷曲的高度为72px
        // console.log(content.clientHeight);  //452
        // console.log(autoProgress.clientHeight);  //310

        // 滚动条最大滚动距离
        var MaxScroll = content.clientHeight - autoProgress.clientHeight; //142
        content.onscroll = function () {
            var contScrollTop = content.scrollTop;
            // 最大卷曲的高度/卷曲的高度=最大滚动的距离/滚动的距离
            var dis = MaxScroll * contScrollTop / 72;
            autoProgress.style.top = dis + 'px';
        }


        // 拖拽滚动条的的事件
        autoProgress.onmousedown = function (ev) {
            var pdis = this.parentNode.offsetTop; //20
            var startDownY = ev.pageY;

            document.onmousemove = function (ev) {
                var moveY = ev.pageY;

                var dis = moveY - pdis - startDownY;
                if (dis <= 0) {
                    dis = 0;
                } else if (dis >= 142) {
                    dis = 142
                }

                // 滚动条实现滚动
                autoProgress.style.top = dis + 'px';
                // 内容如何移动呢       内容被蜷曲的距离
                var boxScrollTop = -dis * 72 / MaxScroll;
                box.style.top = boxScrollTop + 'px';

            }

            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    </script>
</body>

</html>

bingo！！！完成嘻嘻嘻~~~

GGGGGG.enough

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
隐藏浏览器默认滚动条和自定义滚动条样式

隐藏浏览器默认滚动条Chrome浏览器和移动端可以使用-webkit-scrollbar隐藏浏览器自带的滚动条； ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }而火狐和IE可以通过给溢出的盒子嵌套一个父盒子，设置溢出部分auto显示，然后使其宽度增加17px（浏览器默认占据内容的宽度为17px）然后给包裹内容的父盒子在设置overflow：hidden；隐藏溢出的滚动条部分；就可以将默.
复制链接

扫一扫