div CSSでスクロールバーを非表示にする方法

div CSS でスクロール バーを非表示にする方法: 1. スクロール バーの幅を計算して非表示にします; 2. スクロール バーの幅を計算せずに、スクロール バーを 3 つのコンテナーで囲みます; 3.疑似スクロールバー オブジェクトセレクター「::-webkit-scrollbar」。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS を実装してスクロール バーを非表示にしてコンテンツをスクロールする 3 つの方法

スクロール バーを非表示にする一方で、スクロールもサポートする必要があります。フロントエンド開発 この場合、iscrollプラグインを追加するのが一番簡単に考えられますが、CSSでも実現できるようになっており、私も色々なところで使っていますので、この3つの方法を見ていきましょう。

方法 1: スクロール バーの幅を計算して非表示にする

このサイトのサイドバーでは、フロントエンドの日次レポートのコンテンツにスクロールがないことがわかります。バーですが、マウスを上に動かすとコンテンツをスクロールできます。これは何の技術ですか?実際には、位置調整によってスクロール バーを非表示にしているだけです。デモンストレーション 以下は、コード

    

    ......
    

.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 ブログで初めて確認されました。これは、上記のアイデアと似ていますが、次の点が異なります。家に別の箱が追加され、中身がその箱に限定されました。こうすることで、スクロール バーが表示されなくなりますが、スクロールすることはできます。コードは次のとおりです。

 

     

        

            ......
        
     
 
.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 サイトの他の関連記事を参照してください。