Home > Article > Web Front-end > About the use of html scroll bar style and sample code sharing
About the use of html scroll bar style and sample code sharing
- 黄舟Original
- 2017-07-21 14:35:171627browse
Scroll bar attribute settings in html
scrollbar attribute and style details
1. Settings when overflow content overflows (setting whether the set object displays scroll bars)
overflow-x horizontal content overflow Settings when overflow-y vertical content overflows
The values set for the above three properties are visible (default value), scroll, hidden, auto.
2. scrollbar-3d-light-color The color of the bright edge of the three-dimensional scroll bar (set the color of the scroll bar)
scrollbar-arrow-color The color of the triangular arrows on the up and down buttons
scrollbar-base-color scrolling The basic color of the bar
scrollbar-dark-shadow-colorThe color of the strong shadow of the three-dimensional scroll bar
scrollbar-face-colorThe color of the protruding part of the three-dimensional scroll bar
scrollbar-highlight-colorThe blank part of the scroll bar Color
scrollbar-shadow-color The color of the three-dimensional scroll bar shadow
3. Example of setting the scroll bar properties:
(1) Let the browser never appear the scroll bar:
No horizontal scroll bar
<body style="overflow-x:hidden">No vertical scroll bar
<body style="overflow-y:hidden">No scroll bar
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">(2) Set the scroll bar of the multi-line text box:
No horizontal scroll bar
<textarea style="overflow-x:hidden"></textarea>No vertical scroll bar
<textarea style="overflow-y:hidden"></textarea>No scroll bar
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>或<textarea style="overflow:hidden"></textarea>(3) Set window scrolling Bar color:
Set the color of the window scroll bar to red7de5d6a8a2e9bf5bdc147856867a525f
scrollbar-base-color sets the basic color. Generally, only You need to set this property to change the color of the scroll bar.
Add some special effects:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">(4) Define a class in the style sheet file and call the style sheet.
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>Call like this: <textarea class="coolscrollbar"></textarea>Scrollbar-Face-Color is the scroll bar surface color setting;
Scrollbar-Highlight-Color is the scroll bar upper bevel and Set the color of the left bevel;
Scrollbar-Shadow-Color sets the color of the lower bevel and right bevel of the scroll bar;
Scrollbar-3Dlight-Color sets the color of the upper and left edges of the scroll bar;
Scrollbar -Arrow-Color sets the color of the arrows at both ends of the scroll bar.
Scrollbar-Track-Color is the color setting for the scroll bar bottom plate;
Scrollbar-Darkshadow is the color setting for the bottom and right edge of the scroll bar.
Example:b8437d7e4dd589385da2dd768089230d40587128eee8df8f03d0b607fe983014
4.HTML various scrolling attribute codes (mainly Set the text scrolling on the 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.htmlIntroduction to the scroll bar color setting method
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">
The above is the detailed content of About the use of html scroll bar style and sample code sharing. For more information, please follow other related articles on the PHP Chinese website!