相关疑难解决方法(0)

如何通过CSS(层叠样式表)为一个div而不是整个页面自定义滚动条？

Firefox 24引入了Lion滚动条支持.这将在Mac OS X上显示Lion风格的滚动条.请参阅:https://wiki.mozilla.org/Lion_Scrollbars/Triage

这对我来说是个问题:默认情况下,div上的滚动条现在是隐藏的.有时我想强制显示滚动条.

对于WebKit,有一个很好的解决方案(在https://davidwalsh.name/osx-overflow中提到):

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
}

::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

有人知道如何在Mac OS X上强制在Firefox 24(及以上)中显示可见的滚动条吗？

是否有与webkit滚动条匹配的插件javascript滚动条？

如何使用CSS3设置webkit滚动条的样式？

我的意思是这些属性

::-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); 
}

这是我的div标签

<div class="scroll"></div>

这是我目前的CSS

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}

是否可以使用CSS为Mozilla Firefox创建自定义滚动条？

我找到了一些文章,告诉它过去得到了支持(例如http://codemug.com/html/custom-scrollbars-using-css/).

还有更多的例子吗？

我想制作透明的滚动条,它应该放在带有内容的div上.只有css和webkit浏览器.它看起来像是一个例子.我的代码.问题是滚动条将内容移动到左侧.如何让它看起来像在例子中？谢谢你的回复.

div{
  width:410px;
  height:100px;
  overflow-y:scroll;
  border:1px solid green;
  position:relative;
}

::-webkit-scrollbar{
  width:20px;
  position:absolute;
  right:20px;
  z-index:100;
} 

::-webkit-scrollbar-thumb{
  background-color:rgba(0,0,0,1);
  border-right:10px solid white;
}  

如何使用默认浏览器的滚动条替换自定义样式滚动条（我可以使用Webkit更改chrome）

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: #CFCFCF
}
::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5
}
::-webkit-scrollbar-thumb {
    background-color: #2C3E50
}

但是我也想在mozilla firefox中进行更改..帮助我

我尝试在线搜索,但我没有找到任何有用的资料.有没有办法用纯CSS设置滚动条样式,以便与最大数量的浏览器兼容？

我有一个名为“dynamic”的 div，其中包含一些文本，我正在使用 javascript 为其添加样式

var styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode("#dynamic { color: red; }"));
document.getElementsByTagName("head")[0].appendChild(styleElement);

效果很好。同样，我试图为滚动条添加一些CSS，我们可以通过下面的CSS代码来实现它：

div ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

div ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

所以，现在我使用 JavaScript 添加它，如下所示：

var styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode("
     div ::-webkit-scrollbar{
        -webkit-appearance: none;
         width: 7px;
     }
     div ::-webkit-scrollbar-thumb{
         border-radius: 4px;
         background-color: rgba(0,0,0,.5);
         -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
     }
"));
document.getElementsByTagName("head")[0].appendChild(styleElement);

但这并没有按预期工作。

我的问题是：

对于第一个场景，它工作正常（使用javascript向“动态”div添加颜色），但对于第二个场景，如果我使用javascript为滚动条添加css，它不起作用。如果第一种情况有效，那么第二种情况也应该有效。

那么，是我写错了还是有其他方法使用javascript为webkit-scrollbar添加css？

这是jsFiddle的代码

我使用 chrome 的时间最长。当我制作我的网站并想隐藏出现在我的侧边栏菜单中的滚动条时，我只是overflow: auto;在 CSS 中使用，然后.sidebar_menu::-webkit-scrollbar {display: none;}. 所以没有可见的滚动条，我可以用鼠标滚轮滚动侧边栏菜单。

昨天，我开始使用 Mozilla Firefox，我意识到滚动条是可见的，并且.sidebar_menu::-moz-scrollbar {display: none;}不起作用。老实说，这让我感到害怕，因为我找不到摆脱这种情况的方法。我只是希望它在 chrome 和 Mozilla 中是一样的。至少这个滚动条的东西。

我很高兴使用这个很棒的库 - jQuery Nice Select链接。但我不明白为什么这不支持滚动条，尤其是在谷歌浏览器中

铬合金 ：

和火狐

我不明白为什么 google chrome 不支持滚动条，或者我应该以某种方式添加它？