Maison > Article > interface Web > À propos de l'utilisation du style de barre de défilement HTML et du partage d'exemples de code
À propos de l'utilisation du style de barre de défilement HTML et du partage d'exemples de code
- 黄舟original
- 2017-07-21 14:35:171582parcourir
Paramètres des attributs de la barre de défilement en HTML
Explication détaillée des attributs et des styles de la barre de défilement
1. Paramètres lorsque le contenu de débordement déborde (définir si l'objet défini affiche les barres de défilement)
overflow-x Paramètres de débordement de contenu horizontal lorsque débordement de contenu vertical overflow-y
Les paramètres des trois attributs ci-dessus sont visibles (valeur par défaut), défilement, masqué, auto.
2. scrollbar-3d-light-color La couleur du bord lumineux de la barre de défilement tridimensionnelle (définir la couleur de la barre de défilement)
scrollbar-arrow-color La couleur des flèches triangulaires sur le boutons haut et bas
scrollbar-base-color scroll La couleur de base de la barre
scrollbar-dark-shadow-color La couleur de l'ombre forte de la barre de défilement tridimensionnelle
scrollbar-face-color La couleur de la partie saillante de la barre de défilement tridimensionnelle
scrollbar-highlight-color La partie vide de la barre de défilement Couleur
scrollbar-shadow-color La couleur de l'ombre de la barre de défilement tridimensionnelle
3. Exemple de définition des propriétés de la barre de défilement :
(1) Laissez le navigateur ne jamais avoir de barres de défilement :
Pas de barre de défilement horizontale
<body style="overflow-x:hidden">Pas de barre de défilement verticale
<body style="overflow-y:hidden">Pas de barre de défilement
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">(2) Définir des barres de défilement de texte multiligne pour les boîtes :
Pas de barres de défilement horizontales
<textarea style="overflow-x:hidden"></textarea>Pas de barres de défilement verticales
<textarea style="overflow-y:hidden"></textarea>Pas de barres de défilement
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>或<textarea style="overflow:hidden"></textarea>(3) Définissez la couleur de la barre de défilement de la fenêtre :
Définissez la couleur de la barre de défilement de la fenêtre sur rouge7de5d6a8a2e9bf5bdc147856867a525f
scrollbar-base-color définit la couleur de base. Généralement, il vous suffit de définir cet attribut pour changer la couleur de. la barre de défilement.
Ajoutez quelques effets spéciaux :
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">(4) Définissez une classe dans le fichier de feuille de style et appelez la feuille de style.
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>Appelez comme ceci : <textarea class="coolscrollbar"></textarea>Scrollbar-Face-Color est le paramètre de couleur de la surface de la barre de défilement
Scrollbar-Highlight-Color est ; la barre de défilement Définit la couleur des biseaux supérieur et gauche de la barre de défilement ;
Scrollbar-Shadow-Color définit la couleur des biseaux inférieurs et droits de la barre de défilement
Scrollbar-3Dlight-Color définit la couleur ; des bords supérieur et gauche de la barre de défilement ;
Scrollbar-Arrow-Color définit la couleur des flèches aux deux extrémités de la barre de défilement.
Scrollbar-Track-Color est le paramètre de couleur de la plaque inférieure de la barre de défilement ;
Scrollbar-Darkshadow est le paramètre de couleur du bord inférieur et droit de la barre de défilement.
Exemple :b8437d7e4dd589385da2dd768089230d40587128eee8df8f03d0b607fe983014
4. HTML divers codes d'attribut de défilement (principalement définir le texte défilement sur la page)
<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 Introduction à la méthode de réglage des couleurs de la barre de défilement
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">
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!