CSS はスクロール バー スタイルの解析を制御します
前の 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>
上記の 2 つの項目は、、
、
添付ファイル:
overflow 属性とそのさまざまな機能について説明します:
オーバーフロー: 表示されます。コンテンツは切り取られません。スクロールバーも追加されません。デフォルト値。この値を使用すると、「幅」と「高さ」の値をどのように設定しても、範囲を超えているかどうかに関係なく、コンテンツが強制的に表示されます。
overflow:auto; 必要に応じてコンテンツを切り取り、スクロールバーを追加します。
オーバーフロー: オブジェクトの高さを超えるコンテンツを表示しません。
overflow:scroll; 常に垂直スクロールバーを表示します。
overflow コンテンツが横方向、縦方向に溢れる場合の設定
overflow-x コンテンツが横方向に溢れる場合の設定
overflow-y コンテンツが縦方向に溢れる場合の設定
の値上記の属性設定は表示、スクロール、非表示、自動
非表示は表示とは逆の効果があります。 「幅」と「高さ」を超えるものは非表示になります。
スクロール コンテンツが範囲を超えるかどうかに関係なく、スクロールバーが表示されます。
概要:
この記事を学習することで、友人が CSS コントロールのスクロール バー スタイルをより深く理解できるようになり、あなたの仕事に役立つことを願っています。
関連する推奨事項:
CSS3カスタムスクロールバースタイルの詳細な例
以上がCSS はスクロール バー スタイルの解析を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8647
17
1790
16
1732
56
1582
29
1452
31
Autoprefixerとは何ですか？それはどのように機能しますか？
Jul 02, 2025 am 01:15 AM
Autoprefixerは、ターゲットブラウザスコープに基づいてCSS属性にベンダープレフィックスを自動的に追加するツールです。 1.エラーで接頭辞を手動で維持する問題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある属性を分析し、構成に従ってコードを生成する属性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辞を手動で追加しない、構成の更新を保持すること、すべての属性ではなくプレフィックスを維持することが含まれ、プリプロセッサでそれらを使用することをお勧めします。
CSSでSVGをアニメーション化するにはどうすればよいですか？
Jun 30, 2025 am 02:06 AM
Animatingsvgwithcssissispossibleusing forbasicanimationsand transitions for-interactiveeffects.1.use@keyframestodefineanimationstages forpropertieslikescale、ofacity、andcolor.2
conic-gradient（）関数とは何ですか？
Jul 01, 2025 am 01:16 AM
TheConic-Gradient（）functionsscreateScular勾配の勾配は、測定されていることを確認してください
モバイルファーストデザインに焦点を当てたCSSチュートリアル
Jul 02, 2025 am 12:52 AM
Mobile-firstcsssdesignRequiresTtingtheviewportatatag、使用、stylumsmallscreensup、optimingTouchTargets.first.second、cecond、em、orreminsteadofpixelseders.ths.thsthird、writebasethirdird、addtocontrolscaling.second、addtocontrolscaling.second
ロードスピナーとアニメーションを作成するためのCSSチュートリアル
Jul 07, 2025 am 12:07 AM
CSSロード回転子を作成するには3つの方法があります。1。境界の基本回転子を使用して、HTMLとCSSを介してシンプルなアニメーションを実現します。 2。複数のポイントのカスタム回転子を使用して、異なる遅延時間を経てジャンプ効果を実現します。 3.ボタンに回転子を追加し、JavaScriptを介してクラスを切り替えて、読み込みステータスを表示します。各アプローチは、ユーザーエクスペリエンスを向上させるために、色、サイズ、アクセシビリティ、パフォーマンスの最適化などのデザインの詳細の重要性を強調しています。
@supportsを使用したCSSの機能検出とは何ですか？
Jul 02, 2025 am 01:14 AM
featuredEtectionincssusing@supportscheckcksifabrowssaspificfeatureforeapplyingStyles.1.itusesconditionalcssalcssbasedsbasedonproperty-valuepairsなど、supports（display：grid）.2.thismethodensuresuresuresuresuresurecompativitionivitionivitionaindavoidavoidsrioushsriasiondrell
ヨーロッパの仮想通貨取引プラットフォームランキングリスト2025最新リストTop10在庫（最近更新）
Jul 11, 2025 pm 08:57 PM
2025年のヨーロッパの上位10の仮想通貨取引プラットフォームには、Binance、OKX、Coinbaseなどが含まれ、コンプライアンス、セキュリティ、費用、資産タイプ、ユーザーエクスペリエンスに基づいて選択されています。 1。Binance：世界は最大の取引量、低料金を持ち、複数の国でライセンスを取得しています。 2。OKX：フランスに登録されている包括的な製品、強力な技術。 3。コインベース：初心者に適したコンプライアンスと安全性は、多くの国でライセンスされています。 4。GATE.IO：多くのヨーロッパ諸国で登録されている長い歴史、高いセキュリティがあります。 5。ビットスタンプ：早期に設立され、ルクセンブルクによって規制された強力なコンプライアンスがあります。 6。ETORO：CYSECによって規制された社会的取引、多様化された投資をサポートします。 7。Bitpanda：世界
CSSとJavaScriptをHTML5構造と効果的に統合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥当な読み込み順序、デカップリング設計と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長する構造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問題を回避する必要があります。 3. JavaScriptは、前に導入され、Deferまたは非同期を使用して非同期にロードすることをお勧めします。 4. 3つの間の強い依存性を減らし、データ - *属性とクラス名制御ステータスを介して動作を促進し、統一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協力することができます。
