HTMLスクロールバースタイルの使用とサンプルコードの共有について-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLスクロールバースタイルの使用とサンプルコードの共有について

黄舟

Jul 21, 2017 pm 02:35 PM

html使用スタイル

HTMLのスクロールバー属性設定
スクロールバーの属性とスタイルの詳細説明
1. オーバーフローコンテンツが溢れた場合の設定（設定したオブジェクトにスクロールバーを表示するかどうかの設定）
Overflow-x コンテンツが横方向に溢れた場合の設定
Overflow-y 縦方向の設定方向性のあるコンテンツがオーバーフローした場合
上記 3 つの属性に設定される値は、visible (デフォルト値)、scroll、hidden、auto です。
2. スクロールバー-3d-light-color 3次元スクロールバーの明るい端の色（スクロールバーの色を設定します）
スクロールバー-arrow-color 上下ボタンの三角矢印の色
スクロールバーの基本色
スクロールバーの基本色
スクロールバー -dark-shadow-color 3次元スクロールバーの強い影の色
スクロールバー-フェイスカラー 3次元スクロールバーのはみ出し部分の色次元スクロールバー
スクロールバーの空白部分の色
スクロールバーの空白部分の色
3次元スクロールバーの影の色
3. スクロールバーのプロパティの設定例:
(1) Makeブラウザにはスクロールバーがありません:

水平スクロールバーなし

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

垂直スクロールバーなし

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

スクロールバーなし

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

(2 ) 複数行のテキストボックスのスクロールバーを設定します:

水平スクロールなしバー

<textarea style="overflow-x:hidden"></textarea>

垂直スクロールバーなし

<textarea style="overflow-y:hidden"></textarea>

スクロールバーなし

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

(3) ウィンドウのスクロールバーの色を設定します:
ウィンドウのスクロールを設定しますバーの色は赤です

scrollbar-base-color は、基本色を設定します。通常、この属性を設定する必要があるのは、スクロールバーの色を変更する場合だけです。これが目的です。

特殊効果を追加します:

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

(4) スタイルシートファイルにクラスを定義し、スタイルシートを呼び出します。

<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>

は次のように呼び出されます。

<textarea class="coolscrollbar"></textarea>

Scrollbar-Face-Color はスクロールバーの表面の色設定です。
Scrollbar-Highlight-Color はスクロールバーの上部のベベルと左側のベベルの色設定です。はスクロールバーです。スクロールバーの下端と右端の色を設定します。
Scrollbar-3Dlight-Color は、スクロールバーの上端と左端の色を設定します。
Scrollbar-Arrow-Color は、矢印の色を設定します。スクロールバーの両端にあります。
Scrollbar-Track-Color はスクロールバーの底板のカラー設定です。
Scrollbar-Darkshadow はスクロールバーの下端と右端のカラー設定です。
例:

4. HTMLの各種スクロール属性コード（主にページのテキストスクロールの設定）

<marquee>普通卷动</marquee> <br />   
<marquee behavior=slide>滑动</marquee>  <br />  
<marquee behavior=alternate>来回卷动 </marquee><br /> 
<marquee direction=down>向下卷动</marquee> <br /> 
<marquee direction=up>向上卷动</marquee> <br /> 
<marquee direction=right>向右卷动</marquee> <br /> 
<marquee direction=left>向左卷动</marquee> <br /> 
<marquee loop=2>卷动次数</marquee> <br />   
<marquee scrollamount=30>设定卷动距离</marquee> <br />

5.html スクロールバーの色の設定方法の紹介

🎜

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color: color; /*滚动条的基色*/

webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素：
-webkit-scrollbar 滚动条整体部分
-webkit-scrollbar-button 滚动条两端的按钮
-webkit-scrollbar-track 外层轨道
-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？意会就好）
-webkit-scrollbar-corner 边角
-webkit-resizer 定义右下角拖动块的样式
通过这些伪元素，可以完全的重写一个网站的滚动条样式。
当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：
:horizontal – horizontal伪类应用于水平方向的滚动条
:vertical – vertical伪类应用于竖直方向的滚动条
:decrement – decrement伪类应用于按钮和内层轨道（track piece）。它用来指示按钮或者内层轨道是否会减小视窗的位置（比如，垂直滚动条的上面，水平滚动条的左边。）
:increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置（比如，垂直滚动条的下面和水平滚动条的右边。）
:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end – 类似于start伪类，标识对象是否放到滑块的后面。
:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器（元素）是否当前被激活。（在webkit最近的版本中，该伪类也可以用于：：selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类）
另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

6.html滚动条的使用技巧：
(1)隐藏滚动条

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

(2)如何在单元格或图层中出现滚动条

<p style="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></p>

(3)javascript改变框架中滚动条的样式，比如改变颜色、改为平面效果等

<style> 
body  {
 
     scrollbar-face-color:   #ffcc99;
              scrollbar-highthit-color:   #ff0000; 
              scrollbar-shadowcolor:   #ffffff; 
              scrollbar-3dlight-color:   #000000; 
              scrollbar-arrow-color:   #ff0000; 
              scrollbar-track-color:   #dee0ed; 
              scrollbar-darkshadow-color:   #ffff00;} 
</style>

说明：
scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色；
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色；
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色；
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色
备注：
color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。

(4)javascript中的页面元素定位
clientX、clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；
offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；
screenX、screenY是鼠标相对于用户整个屏幕的位置；
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（因为有滚动条的产生，所以目前页面可见内容是不定的）。
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left：对象相对于页面的X坐标。
top：对象相对于页面的Y坐标

(5)屏蔽选择,右键等

<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">

以上がHTMLスクロールバースタイルの使用とサンプルコードの共有についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。