スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

携帯

モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム スクロール バー疑似クラス セレクター ::-webkit-scrollbar を使用してスクロール バーを非表示にすることができます。

  .container::-webkit-スクロールバー{
    表示: なし;
  }

パソコン

PC 側の互換性要件は比較的高いので、別の方法を試すこともできます。一般的な考え方としては、親コンテナ div をコンテンツ div の外側にラップし、overflow: hidden を設定し、コンテンツ div に display-x: hidden; display-y: auto を設定し、最後に、親コンテナ div の幅をコンテンツ div の幅よりも小さく設定するか、コンテンツ div の margin-right を負の値に設定します。

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .外側{
   幅: 300ピクセル;
   高さ: 300px;
   オーバーフロー: 非表示;
 
   。コンテンツ {
     幅: 330ピクセル;
     /*右マージン: -15px;*/
     高さ: 100%;
     オーバーフロー-x:非表示;
     オーバーフロー-y: 自動;
     背景: 赤;
     パディング上部: 100px;
 
     p:not(:最初の子) {
       上マージン: 100px;
     }
   }
 }

要約する

上記は、スクロールバーを非表示にしながらもスクロール効果を維持するために紹介した純粋な CSS です (モバイルと PC)。お役に立てれば幸いです。

<<:  ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

>>:  docker-compose を使用して Apollo カスタム環境をデプロイする詳細なチュートリアル

推薦する

VueRouterルーティングの詳細な説明

目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...

床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

UbuntuにCMakeをインストールするいくつかの方法の詳細な説明

CMakeをインストール sudo apt をインストール cmake この方法はインストールが簡単...

HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT

表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...

ブラウザでTIF形式の画像を表示する方法

ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...

Vue ミックスインの使用方法とオプションのマージの詳細な説明

目次1. コンポーネントでの使用2. オプションのマージ要約する1. コンポーネントでの使用Mixi...

MySql 8.0.16 バージョンのインストールでは、「UTF8B3」ではなく「UTF8B4」が使用されるように求められます。

MySQL 8.0.16 にインストールする場合、「UTF8B3」ではなく「UTF8B4」が使用さ...

体験したい17 404ページ

404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明

簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

Windows 10 に TomCat をインストールするチュートリアル図

WindowsにTomCatをインストールするこの記事では、WindowsプラットフォームにTomC...

完全なMySQL学習ノート

目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...