更改滚动条样式
Change a scroll bar style
请参考此链接查看示例:点击这里
我使用下面的css来改变滚动条:
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: scroll;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 6px;
border-radius: 6px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
这个css只能改变y轴滚动条的宽度,我怎么能改变x轴滚动条的宽度呢
请帮我解决这个问题
DEMO:
http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p =
预览使用::-webkit-scrollbar {width: 6px; height: 6px;}
检查演示。
http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p =
预览还要注意,基于CSS的滚动条并不适用于所有浏览器。所以,我建议使用基于js的滚动条。
我更喜欢jquery.nicescroll
https://github.com/inuyaksa/jquery.nicescroll您可以指定高度来增加x滚动条的宽度。例如{}
::-webkit-scrollbar {
width: 30px;
height: 30px;
}
你可以在x和y方向设置滚动条的样式。这里是提琴
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
感谢大家的回答,但解决方案是:
/* Let's get this party started */
::-webkit-scrollbar {
width: 6px;height:6px;
}
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- 条件滚动条样式
- 设置右侧默认滚动条的样式
- JScrollpane不会设置滚动条的样式
- JQuery:手风琴高度样式:填充导致垂直滚动条
- 可以在 gwt 中设置本机滚动条的样式,无需定义自定义滚动条,也无需使用 ScrollPanel 或 CustomScr
- 样式 Facebook 喜欢框滚动条
- 滚动条在 Firefox 中显示的样式与 Chrome 不同
- 如何实现脸书聊天垂直滚动条样式
- 如何自定义twitter iframe滚动条的样式
- 更改滚动条样式
- 只改变iframe的滚动条样式
- 如何改变滚动条样式或隐藏滚动条在浏览器通过javascript或css
- 自定义样式的滚动条
- 如何隐藏默认样式的滚动条,当我使用overflow:scroll;
- 将webkit滚动条样式应用于文本区域
- JS/jQuery样式的滚动条
- 禁止使用MarginLeft样式更改滚动条