1

我在网上搜索了很多，包括 如何隐藏滚动条，但仍然可以向上/向下滚动， 但无法解决我的问题。

我需要根据需要更改颜色，scroller例如：黑色并减小滚动条的宽度（如果可能，不要显示以下图像，但内容应该垂直滚动）。

我的观点部分：

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

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

滚动条图片

谢谢。

4

2 回答 2

1

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

于 2013-09-20T12:18:20.723 回答
1

webkit浏览器的解决方案：

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: #bfb6a3;
}
于 2013-09-20T12:02:29.303 回答