2011-08-03 16 views
4

1)Google Plusアカウントをお持ちの場合は、ホームページにアクセスしてください。Google Plusのようなハイジャックのページスクロール?

2)右側には、「サークルに追加」ボタンがあります。このボタンをクリックすると表示されます。

3)[サークルに追加]ドロップダウンのいずれかにカーソルを合わせると(ドロップダウンにスクロールする円が十分にある場合)、ページスクロール機能は無効になります。ドロップダウンでは垂直方向にのみスクロールできます。

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

enter image description here

私は(右側のスクロールバー)ここでスクロールすることができますが、これはドロップダウンされている間ページ本体にスクロールすることはできません。

答えて

9

ザ・オーバーフロー自動固定の高さを持っており、ある要素を持っている、彼らのスタイルこのトリックとスクロールバー:http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

は、あなたはそれがFFとIEにして動作させることができます:基本的に巣オーバーフローがある要素autoを他のものに入れ、スクロールバーを負のマージンで非表示にします。次に、同じ要素にスクロールイベントを取り込み、scrollTopの位置に従ってスライダを右側に適用します。 http://jsfiddle.net/kGbbP/4/

しかし、これを行うことができ、多くのjQueryのプラグインがあります:ここで

は、私はそれを行うだろうかある http://www.net-kit.com/jquery-custom-scrollbar-plugins/

+0

どのように私はそれを達成できたが、それを試してみました私自身で? (基本的な手順が分かります) –

+0

また、ブラウザのスクロールイベントをどのようにキャプチャしますか?これらのプラグインのどれもそうすることはできないようです。 –

+0

@Max Hoff:ここに行きます:http://jsfiddle.net/kGbbP/4/ – meo

8

は、これはJavaScriptで作られていません!

純粋なCSSで、(モバイルではない)ウェブキットベースのブラウザでのみ動作します。

ここにCSSコードがあります。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;} 
関連する問題