div CSS でスクロール バーを非表示にする方法: 1. スクロール バーの幅を計算して非表示にします; 2. スクロール バーの幅を計算せずに、スクロール バーを 3 つのコンテナーで囲みます; 3.疑似スクロールバー オブジェクトセレクター「::-webkit-scrollbar」。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS を実装してスクロール バーを非表示にしてコンテンツをスクロールする 3 つの方法
スクロール バーを非表示にする一方で、スクロールもサポートする必要があります。フロントエンド開発 この場合、iscrollプラグインを追加するのが一番簡単に考えられますが、CSSでも実現できるようになっており、私も色々なところで使っていますので、この3つの方法を見ていきましょう。
方法 1: スクロール バーの幅を計算して非表示にする
このサイトのサイドバーでは、フロントエンドの日次レポートのコンテンツにスクロールがないことがわかります。バーですが、マウスを上に動かすとコンテンツをスクロールできます。これは何の技術ですか?実際には、位置調整によってスクロール バーを非表示にしているだけです。デモンストレーション 以下は、コード
<div class="outer-container"> <div class="inner-container"> ...... </div> </div> .outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden; } .inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll; }
デモンストレーションの簡略化されたバージョンです。このコードは、スクロール バーの幅とまったく同じ 17 ピクセルを右に巧みに移動します。この値は手動デバッグによって取得されました。 Chrome、IEでは問題ありませんでした。
方法 2: 3 つのコンテナーに囲まれ、スクロール バーの幅を計算する必要はありません
このコードは、Microsoft ブログで初めて確認されました。これは、上記のアイデアと似ていますが、次の点が異なります。家に別の箱が追加され、中身がその箱に限定されました。こうすることで、スクロール バーが表示されなくなりますが、スクロールすることはできます。コードは次のとおりです。
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div> .element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; }
方法 3: css でスクロール バーを非表示にする
同時に、この記事では CSS を使用してスクロール バーを非表示にする方法も共有しましたが、この方法はそうではありません。 IEと互換性があり、モバイルデバイスでも使用できます。それは、カスタム スクロール バー::-webkit-scrollbar の疑似オブジェクト セレクターです。詳細については、前の記事を参照してください: CSS3 カスタム Webkit スクロール バー スタイル Chrome と Safari
.element::-webkit-scrollbar { width: 0 !important } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; }
さらに詳しい HTML/CSS の知識の場合は、CSS ビデオ チュートリアル 列をご覧ください。
以上がdiv CSSでスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。