CSS で div にスクロールを追加し、スクロール バーを非表示にする

CSS で div にスクロールを追加し、スクロール バーを非表示にする

CSS は div にスクロールを追加し、スクロール バーを非表示にします。具体的なコードは次のとおりです。

htmlで

<div class="box">
    <div>次のコンテンツは別々にスクロールします</div>
    <div class="スクロール">
        <div class="content">
            <p>1111111111111111</p>
            <p>22222222222222</p>
            <p>333333333333333</p>
            <p>44444444444444</p>
            <p>1111111111111111</p>
            <p>22222222222222</p>
            <p>333333333333333</p>
            <p>44444444444444</p>
        </div>
    </div>
</div>

CSS部分

<スタイル>
    div{
        フォントサイズ: 15px;
        下マージン: 20px;
    }
    。コンテンツ{
        height: 300px;v // スクロール部分の高さを設定する必要があります background-color: cadetblue;
        色: アンティークホワイト;
        overflow-x: hidden; /*x軸のスクロールは禁止されています*/
            overflow-y: scroll;/*y軸スクロール*/ 
    }
    .content::-webkit-スクロールバー{
        display: none;/*スクロールバーを非表示*/ 
    }
    p{
        下部マージン: 30px;
        フォントサイズ: 17px;
        色: #333;
    }
</スタイル>

要約する

上記は、div にスクロールを追加し、スクロール バーを非表示にするために紹介した CSS です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  IEのクラッシュバグ

>>:  IDEA に基づいて Tomcat サーバーを展開するための詳細な手順

推薦する

レスポンシブ原則をシミュレートするための基礎コードの Vue 実装の例

目次1.Vue.js の機能: 2.Observer.js 関数 (データハイジャック): 3. C...

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

プライベートウェアハウス(レジストリとハーバー)を構築するためのDockerの実装

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている

スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに...

Maven モードで Tomcat ソースコードを実行する方法

序文最近、Tomcat の起動プロセスを分析していました。Tomcat のソース コードはアイデア次...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

最もよく使われるHTMLエスケープシーケンス

HTML では、<、>、& などは特別な意味を持ち (<、> はリン...

MySQLコマンドが中国語で入力できない問題の解決方法

問題を見つける最近、MySQL コマンドを使用して MySQL サーバーに接続したときに、以下のよう...

MySQL が InnoDB テーブルが独立したテーブルスペースか共有テーブルスペースかを判断する方法の詳細な説明

序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

dl、dt、dd リスト ラベルの例

dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...