我想用CSS自定义滚动条.
我使用这个WebKit CSS代码,适用于Safari和Chrome:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
我怎么能在Firefox中做同样的事情？
我知道我可以使用jQuery轻松完成它,但如果可行,我宁愿用纯CSS来做.
非常感谢某人的专家建议!
我有这个漂亮的滚动条,可以在Chrome和Safari最新版本中使用.是否可以使用纯CSS为IE9 +创建相同类型的滚动条？
CSS:
.scrollbar
{
float: left;
height: 300px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-active
{
min-height: 450px;
}
#scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#scroll::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scroll::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
HTML:
<div class="scrollbar" id="scroll">
<div class="scrollbar-active"></div>
</div>
我看过我认为所有的滚动条代码,但还没有找到一个不使用jQuery或一个有点复杂的库的简单.
有人用javascript创建了自己的简单滚动条吗？我正在寻找的是一个如何做到这一点的例子.特别是我有一个简单的bootstrap网页:
<body>
<header> ....</header>
<main> ......</main>
</body>
我想要做的是,如果那里的内容大于适合单个页面,则该区域右侧会出现一个小的页面滚动条.出于样式目的,我希望这不是浏览器默认滚动条.
这是我正在寻找的一个例子但是这个使用jQuery所以我不能在我的网站上使用它:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
我正在寻找一些方法来使用现代浏览器IE9及更高版本中的 javascript .我认为这对许多人来说很有用,我为此开了一个200的赏金,希望有人可以提供一个可拖动的页面滚动条的好例子,它也会在页面内容区域上响应鼠标滚轮.
只是一个更新.我不是在寻找移动解决方案.我只是在寻找一种可以在PC/Mac浏览器中运行的解决方案.该网站未设置或适用于手机.可以在iPad或平板电脑上使用但是为了满足这些需求,我希望能够让滚动条默认只使用普通的平板电脑滚动方法.
我正在寻找一个没有jquery的自定义滚动条.我不能使用jquery,因为其他东西也是jqueryless并且它针对快速加载进行了优化.
非常感谢与我分享的任何想法.
NONNNNN