html 스크롤 막대 스타일 사용 및 샘플 코드 공유에 대해
- 黄舟원래의
- 2017-07-21 14:35:171581검색
HTML의 스크롤바 속성 설정
스크롤바 속성 및 스타일 상세 설명
1. 오버플로 내용이 오버플로될 때 설정(설정된 개체가 스크롤바를 표시할지 여부 설정)
Overflow-x 콘텐츠가 가로 방향으로 오버플로될 때 설정
Overflow-y 세로로 설정 방향성 콘텐츠가 넘칠 때
위 세 가지 속성에 설정된 값은 visible(기본값), 스크롤, 숨김, 자동입니다.
2.scrollbar-3d-light-color 3차원 스크롤바의 밝은 가장자리 색상 (스크롤바 색상 설정)
scrollbar-arrow-color 상하 버튼의 삼각형 화살표 색상
scrollbar-base-color 스크롤바의 기본 색상
scrollbar -dark-shadow-color 3차원 스크롤바의 강한 그림자 색상
scrollbar-face-color 3차원 스크롤바의 튀어나온 부분의 색상 차원 스크롤 막대
scrollbar-highlight-color 스크롤 막대의 빈 부분 색상
scrollbar-shadow-color 3차원 스크롤 막대의 그림자 색상
3. 스크롤 막대 속성 설정 예:
(1) 만들기 브라우저에는 스크롤 막대가 없습니다.
가로 스크롤 막대 없음
<body style="overflow-x:hidden">
세로 스크롤 막대 없음
<body style="overflow-y:hidden">
스크롤 막대 없음
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">
(2) 여러 줄 텍스트 상자의 스크롤 막대 설정:
가로 스크롤 없음 bar
<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) 창 스크롤 막대 색상 설정:
창 스크롤 설정 막대 색상은 빨간색ae81ba17a4ad4c14535f5a84a0d70237
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는 스크롤 바 하단과 오른쪽 가장자리의 색상 설정입니다.
예: 0489c4763a9db8d522f8fde22a12f02440587128eee8df8f03d0b607fe983014
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!