スクロールバーを非表示にしながらもスクロール効果を維持する純粋な 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 カスタム環境をデプロイする詳細なチュートリアル

推薦する

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...

HTMLデザインパターンの日々の勉強ノート

HTML デザインパターン学習ノート今週は主にHTMLデザインパターンを学びました。学習内容をまとめ...

MYSQLストアドプロシージャコメントの詳細な説明

目次1. 使用方法2. 準備3. 文法3.1 変数と代入3.2 入力および出力パラメータ3.3 プロ...

Pycharmとsshリモートアクセスサーバーdockerの詳細なチュートリアル

背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...

JavaScript における変数と関数の昇格の詳細な例

js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...

重複したMySQLテーブルをマージして削除する簡単な方法

シナリオ:クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

Dockerはブリッジを追加し、IPアドレスの範囲を設定します

バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...

血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS

結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

MySQL 8.0.11 MSI バージョンのインストールと構成のグラフィック チュートリアル

この記事では、MySQL 8.0.11 MSIバージョンのインストールと設定のチュートリアルを参考ま...