相关疑难解决方法(0)

我想用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来做.

非常感谢某人的专家建议!

如何定义CSS滚动条样式跨浏览器？我测试了这段代码,它只适用于IE和Opera,但在Chrome,Safari和Firefox中失败了.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>

我有一个小问题试图让我的.html页面在Chrome上保持一致的宽度,例如我有一个页面(1),其中有很多内容溢出了视口(右词？)的高度,所以有一个垂直滚动条在那页(1).在页面(2)我有相同的布局(菜单,div,...等)但内容较少,所以没有垂直滚动条.

问题是,在页面(1)上,滚动条似乎将元素略微向左推(加到宽度？),而所有内容都显示在页面(2)的中心位置

我仍然是HTML/CSS/JS的初学者,我相信这并不是那么困难,但我没有找到解决方案的运气.它确实在IE10和FireFox(非干扰滚动条)上工作,我只在Chrome上遇到过这种情况.

我很想知道Facebook上的自定义滚动条是如何制作的.

它只是CSS或一些JavaScript吗？

如果是,我可以知道代码是什么样的吗？

此问题特定于Facebook滚动条样式,而不是如何简单地使用自定义滚动条

我的jsfiddle在这里
我试图改变滚动条的颜色,但在这里它不起作用.

CSS:

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}?

我有一个简单的水平菜单更像标签..我希望它像BBC应用程序选项卡菜单一样工作,这样当菜单有更多项目时,它将允许两个方向水平滚动.

我的代码在这里http://codepen.io/anon/pen/GZRaee

我尝试了一些东西,但似乎没有任何工作像我在固定宽度div包装菜单,并试图使其可滚动,但这不起作用,因为它总是添加滚动条.我试着把它变成对我来说也不起作用的旋转木马.

基于HTML的网站是否有任何类似的插件.BBC应用程序使用的导航栏在应用程序中很常见,我希望我可以为基于HTML的移动版网页提供类似的功能.

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">MenuONE</a></li>
    <li class="two"><a href="#">MTWO</a></li>
    <li class="three"><a href="#">THREE</a></li>
    <li class="four"><a href="#">FOUR</a></li>
    <li class="five"><a href="#">MenuFIVE</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c">
    <p>This is ONE.</p>
  </div>
  <div class="tab2-c">
    <p>This is TWO</p>
  </div>
  <div class="tab3-c">
    <p>This is THREE</p>
  </div>
  <div class="tab4-c">
    <p>This is FOUR</p>
  </div>

  <div>

现在使用此代码(以及此代码的许多变体),但滚动轨迹变为深灰色,类似#222222或附近.找到很多例子,但是所有例子都给出了相同的结果.Opera,Chrome和Firefox显示此错误.怎么修？

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #000000;
}

通常在滚动条中,垂直滚动条的两端会有向上和向下箭头.

无论如何要删除它,以便只显示滚动条而不是两端的箭头.以下是我的CSS:

.scrollbar-vertical
{
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    overflow-x: hidden;
    scrollbar-3dlight-color:#999;
    scrollbar-arrow-color:white;
    scrollbar-base-color:white;
    scrollbar-face-color:#999;
    border-radius:5px 5px; 
}

是否可以为所有浏览器更改滚动条的样式？如果是的话,怎么样？

我想我的div风格滚动条的风格类似于iPhone或新的发现者osx Lion.它必须与所有浏览器兼容.可能吗？