2016-06-27 9 views
1

自動スクロールバーを実現する方法を知りたいと思います。スクロールバーがアクティブにスクロールするときにのみ表示されることを意味します。ほとんどのサイト(Stackoverflowを含む)とAndroidで使用されるスクロールバーに似ています。Autohideスクロールバー - 必要なときにのみ表示する

スクロールバーの上に配置された固定要素を作成し、Javascriptを使用してスクロールイベントをリスニングし、その不透明度を調整することで、これを達成できました。これはうまくいきますが、私はこれに対するシンプルで純粋なCSSソリューションが可能だと信じています。

私はこれを自分自身で理解しようとしましたが、スクロールバーのスタイルを調べるのは苦痛であり、それほど進歩はありませんでした。この動作OS固有のものですか?

私が探していますプロパティは、機能的にこれと類似しますが、ブラウザ間で仕事をは言うまでもないだろう:応答を事前にhttps://msdn.microsoft.com/en-in/library/windows/apps/hh441298.aspx

-ms-overflow-style: -ms-autohiding-scrollbar 

感謝。

+0

css:overflow:auto;必要なときにスクロールが表示されます。 –

+0

オーバーフロー:自動;使用行動ではないときに自動隠蔽を達成しません。コンテンツの高さがコンテナを超えると、常にスクロールバーが表示されます。 –

+0

お詫び - いくつかのカスタムスタイルがスクロールバーに追加されました:: - webkit-scrollbar –

答えて

2

自分の質問に答えるために:

を私のために問題を引き起こしていたページ上のいくつかのカスタムスタイルがありました。次のプロパティは、カスタムスクロールバーを使用してWebKitに組み込みのスクロールバーをオフにするようブラウザに指示します。私はあなたがページをスクロールしていないときに、それを消すことができます何の疑似クラスが存在しないと考えているものの

::-webkit-scrollbar { 
    width: 40px; 
} 

プロパティ::-webkit-scrollbar-thumbは、あなたがスクロールをスタイルすることができます。これは私に、あなたがJSベースのアプローチを使わない限り、自動的に隠すことのできるWebkitのカスタムスクロールバーを持つことはできないと信じています。

関連する問題