スムーズに表示されないスクロールバー

Question

私のプロジェクトにすばらしいカスタムスクロールバーを追加するには、jQuery plugin（Malihuスクロールバー）を試してみました。これは簡単なWebサイトで動作します。 しかし、私はそれをかなり複雑な適応型レイアウトプロジェクトで使用するのにうんざりしており、うまくいきません。私はマリフのスクロールバーのメカニズム（ソースコードはかなり大きいです）を理解していないので、私のプロジェクトのために適応する方法を知らない。

私は理解できるメカニズムでスクロールバーを作成することができます。要件です：

1. 太い
2. 半透明
3. はエンドスクロール時にスムーズに消失し始めスクロールしたとき、再び表示されます。
4. レイアウトには影響しません（グラフィックエディタの言語によって、スクロールバーは最上層にあり、他の層には影響しません）。
5. クロスブラウザとクロスプラットフォーム。

1と2のソリューションはかなりシンプルですが、次にレイアウトはアニメーションと独立性です。私には最も簡単な解決策を提示してください（jQueryを使ってもOKです）。

時間を節約するために、1と2のタスクをクリアしてjsfiddle（Chromeでは現在のところ正しいスクロールバーのみ表示）を用意しました。 （は、ここでは、ソースコードを貼り付けする必要はありませんが、srackoverflowはjsfiddleリンクのためにそれを要求）

html { 
    overflow: auto; 
} 
body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 5px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(50,50,50,0.5); 
} 

Answer 1

Iだろう個人的にはこのよく知られているプラ​​グインをお勧めします。それは非常にカスタマイズ可能で簡単ですPrefect Scrollbar

を使用する。 プラグインは最新のブラウザで動作するように設計されており、IE 10以降をサポートしています。

外観のロジックをサポートしていますが、私はそれがそのままあなたのニーズに合っているかどうかはわかりません。それに見る。

あなたはまだあなたが&は、例えば、プラグインがサポートするイベントを使用する必要があるとして、あなたの第三の要件を達成するために、あなたはプラグインのCSSを上書きすることができ、スクロールしない場合は、ページ全体に消えてスクロールバーが必要な場合：

アルターデフォルトとして、それが見えないようにするデフォルトの外観ロジック：

.ps-container:hover>.ps-scrollbar-x-rail, 
.ps-container:hover>.ps-scrollbar-y-rail { 
    opacity: 0; 
} 

そして、これを追加します。

.is-scrolling .ps-scrollbar-x-rail, 
.is-scrolling .ps-scrollbar-y-rail { 
    opacity: .6; 
} 

その後、カスタムクラスを追加します（例： is-scrolling）プラグインを適用したのと同じ要素にするには、だけにしてスクロールバーが表示されますプラグインにより、例えばスクロールのイベントを発火上：enscroll

：

$(document).on('ps-scroll-x ps-scroll-y', function() { 
    $("body").addClass("is-scrolling"); 
}); 

Answer 2

私は個人的には良いプラグインをお勧めしますenscroll jQueryプラグインを使用すると、スクロールバーの独自のスタイルを書くことができるのはJavascriptの数行だけです。モバイルデバイス向けのフルサポート、 - タッチイベントのため

• あなたはスクロールペインを移動 として位置し、スクロールバーのサイズが自動的に調整され、スクロールペインのサイズを変更、または スクロールペインの内容を変更
• サポートタブレット と他のタッチスクリーンデバイス - ユーザーは ビューペイン
• コントロールの上に置いまで
• オプションを容易にスクロールして完成しましたが、隠されたスクロールバーを保つどこまでスクロール要素をスクロールするとき はセマンティクスを保持し、同じページにあなたが必要とするスクロールバーのスタイルのいずれか 組み合わせを可能にするために、スクロールバーの要素のクラス名を制御するキーボード
• 上でマウス ホイールまたは矢印キーを
使用して - あなたがする必要はありません マークアップに余分なタグを追加してください。 enscrollは、これらのクライアント側が追加されますので、あなたが

HTML

<div id="scrollbox3"> 
<h1>New Scrolling Window</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p> 
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
</div> 

CSS平坦 初期DOMを保つことができる

#scrollbox3 { 
    overflow: auto; 
    width: 400px; 
    height: 360px; 
    padding: 0 5px; 
    border: 1px solid #b7b7b7; 
} 

.track3 { 
    width: 10px; 
    background: rgba(0, 0, 0, 0); 
    margin-right: 2px; 
    border-radius: 10px; 
    -webkit-transition: background 250ms linear; 
    transition: background 250ms linear; 
} 

.track3:hover, 
.track3.dragging { 
    background: #d9d9d9; /* Browsers without rgba support */ 
    background: rgba(0, 0, 0, 0.15); 
} 

.handle3 { 
    width: 7px; 
    right: 0; 
    background: #999; 
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 7px; 
    -webkit-transition: width 250ms; 
    transition: width 250ms; 
} 

.track3:hover .handle3, 
.track3.dragging .handle3 { 
    width: 10px; 
} 

JS

$('#scrollbox3').enscroll({ 
    showOnHover: true, 
    verticalTrackClass: 'track3', 
    verticalHandleClass: 'handle3' 
}); 

ここで私はそれの小さなデモを行います。 Have a look.