我如何通过CSS(层叠样式表)为一个div而不是整个页面自定义滚动条?
当前回答
Webkit滚动条在大多数浏览器上不支持。
CHROME上的支持
这是一个webkit scrollbar demo 如果你正在寻找更多的例子,请检查这个更多的例子
另一种方法是Jquery滚动条插件
它支持所有浏览器,易于应用
从这里下载插件 如何使用和更多的选项检查这个
DEMO
其他回答
有一种方法可以将自定义滚动条应用于HTML文档中的自定义div元素。这里有一个有用的例子。https://codepen.io/adeelibr/pen/dKqZNb但作为一个要点。你可以这样做。
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
CSS文件是这样的。
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Firefox新版本(64)支持CSS滚动条模块级别1
.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } <div class="scroller"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </div>
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
https://codepen.io/fatihhayri/pen/pqdrbd
下面是一个适用于Chrome和Safari的webkit示例:
CSS:
::-webkit-scrollbar
{
width: 40px;
background-color:#4F4F4F;
}
::-webkit-scrollbar-button:vertical:increment
{
height:40px;
background-image: url(/Images/Scrollbar/decrement.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
::-webkit-scrollbar-button:vertical:decrement
{
height:40px;
background-image: url(/Images/Scrollbar/increment.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
输出:
我尝试了很多插件,他们中的大多数不支持所有的浏览器,我更喜欢iScroll和nanoScroller适用于所有这些浏览器:
Ie11 -> ie6 Ie10 - wp8 Ie9 - wp7 IE Xbox One IE Xbox 360 谷歌Chrome 火狐 歌剧 Safari
但iScroll不工作与触摸!
demo iScroll: http://lab.cubiq.org/iscroll/examples/simple/ 演示nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/
.className::-webkit-scrollbar {
width: 10px;
background-color: rgba(0,0,0,0);
}
.className::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
}
给了我一个漂亮的手机。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?