CSS はスクロールバースタイルの解析を制御します-CSSチュートリアル-php.cn

CSS はスクロールバースタイルの解析を制御します

黄舟

リリース： 2017-11-17 09:35:18

オリジナル

2361 人が閲覧しました

前の 2 つの記事では、CSS 設定 div スクロールバースタイルと CSS3 カスタムスクロールバースタイルの例を紹介しました。コンテンツがコンテナーを超えると、コンテナーにスクロールバーが表示されることは誰もが知っています。 CSS を使用してスクロールバーのスタイルを制御するには?今日は詳しくご紹介させていただきます！

例:

/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。
下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/
 /*定义滚动条轨道*/
    #style-2::-webkit-scrollbar-track
    {
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定义滚动条高宽及背景*/
    #style-2::-webkit-scrollbar
    {
        width: 10px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定义滚动条*/
    #style-2::-webkit-scrollbar-thumb
    {
        background-color: #8b8b8b;
        border-radius: 10px;
    }

ログイン後にコピー

CSS はスクロールバースタイルの解析を制御します

*単一の p でコンテンツのスクロールを実現するには、次の 3 つの条件を満たす必要があります:

1。パーセントまたは自動としては使用できません。

2. コンテンツの高さはそれ自体の高さを超える必要があります。

3. 属性「overflow:auto」を追加する必要があります。

*スクロールバーを非表示にする:

1. 水平スクロールバーを削除する:

<body   style="max-width:90%">

ログイン後にコピー

3. 水平スクロールバーと垂直スクロールバーをすべて非表示にする:

<body style="overflow-y:hidden">

ログイン後にコピー

より良い方法は、スクロールバーの色を完全に透明に設定して、コンテンツをスクロールでき、スクロールバーが表示されないようにすることです。

アプリケーション:

水平スクロールバーなし:

<body style="overflow-x:hidden;overflow-y:scroll">

ログイン後にコピー

垂直スクロールバーなし

<body style="overflow:hidden">或者<body scroll="no">

ログイン後にコピー

スクロールバーなし

<p style="overflow-x:hidden">test</p>

ログイン後にコピー

スクロールバーを自動的に表示します

<p style="overflow-y:hidden">test</p>

ログイン後にコピー

スクロールバーの色を自分で定義します。コードは次のとおりです:

<p style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</p>

ログイン後にコピー

上記の 2 つの項目は、、

、、<iframe> に適用されます</iframe>

添付ファイル:

overflow 属性とそのさまざまな機能について説明します:

オーバーフロー: 表示されます。コンテンツは切り取られません。スクロールバーも追加されません。デフォルト値。この値を使用すると、「幅」と「高さ」の値をどのように設定しても、範囲を超えているかどうかに関係なく、コンテンツが強制的に表示されます。

overflow:auto; 必要に応じてコンテンツを切り取り、スクロールバーを追加します。

オーバーフロー: オブジェクトの高さを超えるコンテンツを表示しません。

overflow:scroll; 常に垂直スクロールバーを表示します。

overflow コンテンツが横方向、縦方向に溢れる場合の設定

overflow-x コンテンツが横方向に溢れる場合の設定

overflow-y コンテンツが縦方向に溢れる場合の設定

の値上記の属性設定は表示、スクロール、非表示、自動

非表示は表示とは逆の効果があります。「幅」と「高さ」を超えるものは非表示になります。

スクロールコンテンツが範囲を超えるかどうかに関係なく、スクロールバーが表示されます。

概要:

この記事を学習することで、友人が CSS コントロールのスクロールバースタイルをより深く理解できるようになり、あなたの仕事に役立つことを願っています。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS はスクロールバースタイルの解析を制御します

CSS はスクロール バー スタイルの解析を制御します

CSS はスクロールバースタイルの解析を制御します