Question

我在网上搜索了很多包括 How to hide scrollbar but still can scroll up/down 但无法解决我的问题。

我需要更改scroller的颜色作为我的要求，例如： BLACK ，同时还要减少滚动条的宽度（ ，如果可能，请不要显示以下图片但内容应垂直滚动 ）。

我的观点部分：

<ui:composition>
    <h:form id="menuId">
        <ul id="navigation" class="nav">
            <ui:repeat value="#{navigationRoleList}" var="menuDTO">
                <li class="#{sessionScope['navId'] eq menuDTO.parentMenu.id ? 'act' : ''}">
                    <a href="#"  class="#{menuDTO.parentMenu.menuClass}">  <h:outputText value="#{menuDTO.menuText}"/></a>
                    <ul  class="#{sessionScope['navId'] eq menuDTO.parentMenu.id ? 'navOver' : ''}">
                        <ui:repeat value="#{menuDTO.bankUserMenus}" var="submenu">
                            <li>
                                <h:commandLink value="#{submenu.menuText}"  action="#{loginBean.getNavigation}">
                                    <f:param value="#{submenu.menuAction}" name="link"/>
                                    <f:param value="#{menuDTO.parentMenu.id}" name="navId"/>
                                </h:commandLink>
                            </li>
                        </ui:repeat>
                    </ul>
                </li>
            </ui:repeat>
        </ul>
    </h:form>
</ui:composition>

和我的css：

ul#navigation {
border: 0 none;
width: 179px;
height: 360px;
padding: 10px 0;
position: relative;
}

ul#navigation li {
display: inline;
list-style: none;
float: left; /*For Gecko*/
width: 100%;
/*height:20px;*/
padding: 0;
margin:  0 0 5px;
}

ul#navigation ul {
margin: 0;
border: 0 none;
width: 170px;
list-style: none;
display: none;
position: absolute;
left: 179px;
top: -50px;
z-index: 99;
padding: 50px 0 0 10px;
height: 550px;
overflow: auto;
}

ul#navigation ul.navOver {
display: block;
}

并得到以下输出，但我想隐藏此图像（如果可能），否则减小宽度。

Scroller image

感谢。

Answer 1

webkit浏览器的解决方案：

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: #bfb6a3;
}

Answer 2

CSS部分用于设置网站中所有滚动条的样式。
将选择器添加到站点中特定于样式的滚动条。

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    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); 
}

更改此部分以获得颜色

背景：rgba（255,0,0,0.8）;

希望这可能有所帮助。为了进一步设计样式，滚动条

-webkit-scrollbar属性系列由七个不同的伪元素组成，它们一起构成一个完整的滚动条UI元素：

:: - webkit-scrollbar解决了栏本身的背景。它是通常由其他元素涵盖
:: - webkit-scrollbar-button解决了方向按钮滚动条
:: - webkit-scrollbar-track解决了“下面”的空白区域进度条
:: - webkit-scrollbar-track-piece是最顶层的进度条未被可拖动滚动元素（拇指）
:: - webkit-scrollbar-thumb处理可拖动的滚动元素根据可滚动元素的大小调整大小
:: - webkit-scrollbar-corner解决（通常）底角可滚动元素，其中两个滚动条可能会遇到
:: - webkit-resizer解决了可拖动的调整大小句柄出现在某些角落底部的滚动条角上方元素

查看http://css-tricks.com/search-results/?q=scroll+bar

使用css更改溢出颜色（滚动条）（使所有浏览器兼容）

2 个答案: