本文介绍了如何使用JavaScript来实现自定义浏览器滚动条，兼容IE、火狐和Chrome。由于CSS仅能有限地改变某些浏览器的滚动条样式，作者通过原生JavaScript模拟滚动条，创建了一个包含滑块和滑动条的布局。内容滚动效果通过计算滑块移动距离与内容滚动距离的比例来实现。文中提到的实现仍存在如浏览器缩放时的适配问题，欢迎读者交流指正。
今天为大家分享一下我自己制作的浏览器滚动条，我们知道用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 the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, 
最低0.47元/天 解锁文章
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
