之前在做项目的时候遇到了一个问题,当时因为我们做的项目是要对谷歌的滚动条进行再定义的,但是分配到我的那个页面的时候是需要对滚动条进行再次还原的(滚动条的样式一旦修改了之后,他原有的样式就不存在了,所以所有的样式就必须重新修改),也就是将滚动条再重新设置回原有的样子,在网上找了很久,之后再一篇文章中找到了一些很不错的方法,下面分享给大家。
这是原文的链接blog.csdn.net/hanshileiai/article/details/40398177;
这部分是对整个滚动条样式的整体部分,颜色是背景色
::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #ddd;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
这是用来定义滑块的,包括鼠标移动到上面以后的情况。
::-webkit-scrollbar-thumb {
height:100px;
border-radius: 0%;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
background-color: #C1C1C1;
}
::-webkit-scrollbar-thumb:hover {
height:100px;
border-radius: 0%;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
background-color: #A8A8A8;
}
这里用这种背景图片的方式是他的上下两部f分可以变成谷歌滚动条的样式,图片可以自己截图。
::-webkit-scrollbar-button:end:increment {
background-image: url(../../images/right.png);
}
::-webkit-scrollbar-button:start:decrement {
background-image: url(../../images/left.png);
}