1

スクロールバーを非表示にする方法など、インターネットを検索 しましたが、上下にスクロールできます が、問題を解決できませんでした。

必要に応じて色を変更する必要があります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;
}

次の出力が得られましたが、この画像を非表示にしたい（可能であれば）、そうでない場合は幅を減らします。

スクローラー画像

ありがとう。

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 ファミリは、7 つの異なる疑似要素で構成され、これらを合わせて完全なスクロールバー UI 要素を構成します。

  • ::-webkit-scrollbar は、バー自体の背景に対応します。それは通常、他の要素によってカバーされています
  • ::-webkit-scrollbar-button は、スクロールバーの方向ボタンに対応します
  • ::-webkit-scrollbar-track は、進行状況バーの「下」の空きスペースに対処します
  • ::-webkit-scrollbar-track-piece は、ドラッグ可能なスクロール要素 (サム) によって覆われていないプログレス バーの最上層です。
  • ::-webkit-scrollbar-thumb は、スクロール可能な要素のサイズに応じてサイズが変更されるドラッグ可能なスクロール要素に対応します
  • ::-webkit-scrollbar-corner は、2 つのスクロールバーが交わる可能性がある、スクロール可能な要素の (通常は) 下隅に対応します。
  • ::-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 に答える