JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

最新推荐文章于 2022-07-05 10:55:08 发布

wswq1125

最新推荐文章于 2022-07-05 10:55:08 发布

阅读量3.2k

点赞数

分类专栏： javascript 文章标签： javascript chrome css 浏览器火狐

本文链接：https://blog.csdn.net/wswq1125/article/details/54133091

版权

本文介绍了如何使用JavaScript来实现自定义浏览器滚动条，兼容IE、火狐和Chrome。通过模拟滚动条，设置CSS隐藏默认滚动条，并计算滑块移动与内容滚动的比例关系，实现滚动效果。同时，针对火狐浏览器的特殊处理也在文中提及。

摘要由CSDN通过智能技术生成

今天为大家分享一下我自己制作的浏览器滚动条，我们知道用css来自定义滚动条也是挺好的方式，css虽然能够改变chrome浏览器的滚动条样式可以自定义，css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色，而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图看下效果：

JavaScript实现的思路就是模拟浏览器自身滚动条。我制作的思路是先将整个文档放在一个容器里面，然后通过改变容器里面的div的top值来实现滚动效果布局如下：

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        overflow:hidden;
    }
    #box{
        float:right;
        top:0;
        right:0;
        width:20px;
        background:#ccc;
        position:relative;
    }
    #drag{
        position: absolute;
        top:0
        left:0;
        width:20px;
        background:green;
    }
    #content{
        position:absolute;
        left: 0;
    }
</style>


<body>
    <div id="box">
        <div id="drag"></div>
    </div>
    <div id="content">
        <div style="background:#ccc;width: 100px;">
            Although many people talk about the super performance of quantum computing, such as one second to complete t