スクロールバーのデフォルトのスタイルを変更する方法

ページ レイアウトで、コンテンツがボックスを超える場合、見た目を美しくするために、余分な部分にスクロール バー効果が設定されます。一部のブラウザーのデフォルトのスクロール バーは非常に見苦しいです。スクロールバーのスタイル？この記事では、スクロール バーのスタイルを設定する方法を説明します。

/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ 1  /*定义滚动条轨道*/
    #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;
    }

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

1 div の高さは固定されている必要があり、パーセンテージや値は使用できません。 autoなどの弾性値。

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

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

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

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

2. 垂直スクロール バーを削除します:

# # 3. 水平および垂直スクロール バーを非表示にする:

4. すべてのスクロール バーを非表示にする:

または

より良い方法は、スクロール バーの色を完全に透明に設定することです。スクロール バーを表示せずにコンテンツをスクロールするという目的を達成します。

アプリケーション:

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

test

垂直スクロール バーなし

test

スクロール バーなし

test

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

< ;div style="height:100px;width:100px;overflow:auto;">test

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

Body {
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

上記 2 この項目は、、

、、<iframe><p></p> <p>添付ファイル: オーバーフロー属性とそのさまざまな機能について説明します:<strong></strong></p>overflow:visible;コンテンツを切り取ったり、スクロール バーを追加したりしません。デフォルト値。この値を使用すると、「幅」と「高さ」の値をどのように設定しても、範囲を超えているかどうかに関係なく、コンテンツが強制的に表示されます。 <p></p>overflow: auto; 必要に応じてコンテンツを切り取り、スクロール バーを追加します。 <p></p>オーバーフロー: 非表示; オブジェクトの高さを超えるコンテンツは表示されません。 <p></p>オーバーフロー: スクロール; 常に垂直スクロール バーを表示します。 <p></p>overflow 水平および垂直コンテンツ オーバーフローの設定 <p></p>overflow-x 水平コンテンツ オーバーフローの設定 <p></p>overflow-y 垂直コンテンツ オーバーフローの設定<p></p>値上記の属性に設定されるのは、visible、scroll、hidden、および auto<p></p>hidden は、visible とは逆の効果を持ちます。 「幅」と「高さ」を超えるものは非表示になります。 <p></p>scroll コンテンツが範囲を超えるかどうかに関係なく、スクロール バーが表示されます。 <p></p></iframe>

以上がスクロールバーのデフォルトのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。