4

1) Google Plus アカウントをお持ちの場合は、ホームページにアクセスしてください。

2) 右側には、ホバーできる [サークルに追加] ボタンのリストがあります。

3) [サークルに追加] ドロップダウンの 1 つにカーソルを合わせると (ドロップダウンにスクロールするのに十分な数のサークルがある場合)、ページのスクロール機能が無効になっていることに注意してください。ドロップダウンでは垂直方向のスクロールのみが許可されています。

これはjavascriptでどのように行われますか?

ここに画像の説明を入力

ここ (右側のスクロール バー) でスクロールできますが、ドロップダウンしている間はページ本文をスクロールできません。

4

2 に答える 2

9

高さが固定でオーバーフロー自動の要素があり、スクロールバーのスタイルを次のトリックで設定します: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

FF と IE で動作させることができます。次に、同じ要素でスクロール イベントをキャプチャし、scrollTop の位置に従って右側のスライダーを調整します。

これが私がそれを行う方法です: http://jsfiddle.net/kGbbP/4/

しかし、これを行うことができる多くの jquery プラグインがあります: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

于 2011-08-03T09:20:29.010 に答える
8

これはJavaScriptを介して作成されていません！

これは純粋なCSSであり、（モバイル以外の）Webkitベースのブラウザーでのみ機能します。

これがCSSコードです。これをCSSファイルに含め、HTMLドキュメントに添付して、.htmlファイルを実行します。これがデモです：http：//jsfiddle.net/3ZqGu/

そしてここにCSSコードがあります：

::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{ 
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}
于 2011-09-08T15:43:24.187 に答える