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 サーバーを展開するための詳細な手順

推薦する

HTMLリンクタグのrel属性

<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...

CSS3 を使用して中心点の周りに要素を配置する方法の例

この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

Linux で Redis のリモート接続を実装する方法

LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...

VMware のインストールと使用時の問題と解決策

仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...

CocosCreatorのホットアップデートの包括的な説明

目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...

Docker で MySQL サービスをデプロイする方法と、遭遇する落とし穴

最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

1つの記事でTypeScriptのデータ型について学ぶ

目次基本タイプあらゆるタイプ配列タプルインタフェース関数自己推論を入力する結合タイプ(1つ以上選択)...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...