携帯 モバイル ページは 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 カスタム環境をデプロイする詳細なチュートリアル
履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...
位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...
序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...
HTML デザインパターン学習ノート今週は主にHTMLデザインパターンを学びました。学習内容をまとめ...
目次1. 使用方法2. 準備3. 文法3.1 変数と代入3.2 入力および出力パラメータ3.3 プロ...
背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
シナリオ:クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...
今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...
目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...
バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...
結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...
目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...
インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...
この記事では、MySQL 8.0.11 MSIバージョンのインストールと設定のチュートリアルを参考ま...