前の 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;
}
*単一の 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>
、
添付ファイル:
overflow 属性とそのさまざまな機能について説明します:
オーバーフロー: 表示されます。コンテンツは切り取られません。スクロールバーも追加されません。デフォルト値。この値を使用すると、「幅」と「高さ」の値をどのように設定しても、範囲を超えているかどうかに関係なく、コンテンツが強制的に表示されます。
overflow:auto; 必要に応じてコンテンツを切り取り、スクロールバーを追加します。
オーバーフロー: オブジェクトの高さを超えるコンテンツを表示しません。
overflow:scroll; 常に垂直スクロールバーを表示します。
overflow コンテンツが横方向、縦方向に溢れる場合の設定
overflow-x コンテンツが横方向に溢れる場合の設定
overflow-y コンテンツが縦方向に溢れる場合の設定
の値上記の属性設定は表示、スクロール、非表示、自動
非表示は表示とは逆の効果があります。 「幅」と「高さ」を超えるものは非表示になります。
スクロール コンテンツが範囲を超えるかどうかに関係なく、スクロールバーが表示されます。
概要:
この記事を学習することで、友人が CSS コントロールのスクロール バー スタイルをより深く理解できるようになり、あなたの仕事に役立つことを願っています。
関連する推奨事項:
CSS3カスタムスクロールバースタイルの詳細な例
以上がCSS はスクロール バー スタイルの解析を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
