15

-webkit-scrollbar を使用していますが、ページの読み込み時にスクロールバーが非表示になり、それが接続されているコンテナー div にカーソルを合わせるまで非表示のままになります。スクロール可能な領域にカーソルを合わせると、それが表示されます。

CSS のさまざまな div とルールに :hover と :focus の影響を追加しようとしましたが、うまくいきませんでした。

-webkit-scrollbar を使用して私が言及していることを行う方法はありますか? コードを投稿することはできますが、かなり簡単です。CSS ルールがアタッチされた 1 つの外側の div と、高さと幅が設定された 1 つの内側の div。次に、-webkit-scrollbar の CSS ルール。

#u #trail ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
#u #trail ::-webkit-scrollbar-button:start:decrement,
#u #trail ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}
#u #trail ::-webkit-scrollbar-track-piece {
    background-color: #FAFAFA;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #999;
    -webkit-border-radius: 8px;
}
#u #trail-overflow {
    width: 860px;
    max-height: 500px;
   overflow: auto;
}
4

5 に答える 5

39

CSSで自動非表示を通過したようです。どういうわけか自分のアプリでそれを行い、どうやってそれを手に入れたのかを探していました. これは、@timによる既存のフィドルへの変更です

http://jsfiddle.net/4RSbp/165/

これはトリックを行います：

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}
于 2013-02-07T13:39:41.897 に答える
5

シンプルな CSS を使用してこれを実現できます。

例えば。#content-wrapperスクロールするdivがある場合background-color: rgb(250, 249, 244);

#content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
}

#content-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: gray;
}

参考までに、親指の不透明度を（背景色と一致させるのではなく）ゼロに設定することもできますが、不透明度はページ上の他のスクロールバーにも適用されるようです。

::-webkit-scrollbar-trackPS これは、の背景色も の背景色と一致することを前提としています#content-wrapper。

于 2013-07-28T20:04:41.847 に答える
3

結局、slimscroll javascriptプラグインを使用しました。すべて CSS のソリューションがあればクールですが、このプラグインは非常にうまく機能しており、フォーカスを表示/非表示にすることができます。

http://rocha.la/jQuery-slimScroll

于 2012-05-07T19:43:58.903 に答える
3

webkit でスクロールサムを非表示にするのは直感的ではありません。私のページでは、独自の「無限スクロール」効果を実装するために、デフォルトのブラウザ スクロール機能をすべて非表示にする必要がありました。唯一難しかったのは、Webkit の「サム」オーバーレイでした。これは、画面が動いている間 (マウスホイールでスクロールするときなど) にのみ表示されます。

この Webkit スクロールサムを非表示にするために、いくつかのスタイルを「すべての」スクロールサムに適用してから、特定のサムに非表示効果を適用する必要がありました (コンテンツが十分に長いかどうかわからないため、プログラムでこれを行う必要があります)。ページが読み込まれるまでのカスタム スクロール効果)。

使用したスタイルは次のとおりです。

::-webkit-scrollbar { /* required, although an apparent no-op */
    color: inherit;
}
::-webkit-scrollbar-thumb { /* leave most bars alone */
    background-color: grey;
}
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */
    background-color: grey;
}
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
    display: none; 
}       
.hideThumb { /* required, although an apparent no-op */
    background-color: white;
}

次に、そのthumbHandleをプログラムで非表示にしたいと判断したら、jqueryでそれを行うことができます:$('#customScrollDiv').toggleClass('hideThumb');

注意が必要なのは、通常はすぐに使用できる CSS スタイルの多くの「デフォルト設定」が必要なことですが、上記の Webkit スタイルの 1 つでも指定し始めると、それらすべてが必要になるか、適用されません。

于 2012-12-20T00:08:15.290 に答える
1

この動作デモを参照してください: http://jsfiddle.net/trpeters1/4RSbp/3/ これはここから派生したものです:

http://css-tricks.com/examples/WebKitScrollbars/

于 2012-05-07T19:11:02.617 に答える