首页 > 其他分享 >HTML滚动条样式代码及使用技巧

HTML滚动条样式代码及使用技巧

时间：2022-10-24 00:33:07浏览次数：62  
标签：颜色 HTML width 样式 滚动条 color scrollbar border

HTML滚动条样式代码及使用技巧

2022-04-21 09:47 更新

在 html 网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在 html 网页中添加一个带有滚动条的文本框，就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，下面就是相关语法：

实例

color: #ffffff; 
 
border: solid 2px black; 
width: 120px; 
height: 200px; 
overflow: scroll; 
scrollbar-face-color: #889B9F; 
scrollbar-shadow-color: #3D5054; 
scrollbar-highlight-color: #C3D6DA; 
scrollbar-3dlight-color: #3D5054; 
scrollbar-darkshadow-color: #85989C; 
scrollbar-track-color: #95A6AA; 
scrollbar-arrow-color: #FFD6DA;

上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。


html中滚动条属性设置

​scrollbar​属性、样式详解
1、​overflow​内容溢出时的设置（设定被设定对象是否显示滚动条） 
    ​overflow-x​水平方向内容溢出时的设置 
    ​overflow-y​垂直方向内容溢出时的设置 
    以上三个属性设置的值为​visible​(默认值)、​scroll​、​hidden​​、auto​。 


2、​ scrollbar-3d-light-color​立体滚动条亮边的颜色（设置滚动条的颜色） 
    ​scrollbar-arrow-color​上下按钮上三角箭头的颜色 
    ​scrollbar-base-color​滚动条的基本颜色 
    ​scrollbar-dark-shadow-color​立体滚动条强阴影的颜色 
    ​scrollbar-face-color​立体滚动条凸出部分的颜色 
    ​scrollbar-highlight-color​滚动条空白部分的颜色 
    ​scrollbar-shadow-color​立体滚动条阴影的颜色    html滚动条     我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条 

没有水平滚动条 
<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.设定窗口滚动条的颜色 

设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red"> 
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-Shadow-Color​为滚动条下斜面和右斜面颜色设定； 
​Scrollbar-3Dlight-Color​为滚动条上边和左边的边沿颜色设定； 
​Scrollbar-Arrow-Color​为滚动条两端箭头颜色设定。 
​Scrollbar-Track-Color​为滚动条底板颜色设定； 
​Scrollbar-Darkshadow​为滚动条下边和右边边沿颜色设定。 

举例： 

 <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>

备注框

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 />    

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​ 等伪类同样可以用于滚动条中。

html滚动条的使用技巧

(1)隐藏滚动条

<bodystyle="overflow-x:hidden;overflow-y:hidden">

 

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

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

 

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

<STYLE> 

BODY   {SCROLLBAR-FACE-COLOR:   #ffcc99;

              SCROLLBAR-HIGHLIGHT-COLOR:   #ff0000; 

              SCROLLBAR-SHADOW-COLOR:   #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:colo​r​;设置或检索滚动条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

 

下面的这个小例子是 实现滚动条根据窗体的大小自动设置

[html] 
<SPAN style="FONT-SIZE: 18px"><html>  
<head>  
<style type="text/css">  
  .TopDIV   
  {    
     position:absolute;   
     left:130px;  
     top:10px;  
     width:105;  
     height:30;  
     overflow-x:hidden;  
     overflow-y:auto;  
     float: right;  
     border-style.:solid;  
     border-width:;   
     border-color:red  
  }  
  .LeftDIV   
  {    
     position:absolute;   
     left:10px;  
     top:40px;  
     width:120;  
     height:60;  
     overflow-x:hidden;  
     overflow-y:hidden;  
     float: right;  
     border-style.:solid;  
     border-width:;   
     border-color:yellow  
  }  
  .MainDIV   
  {    
     position:absolute;   
     left:130px;  
     top:40px;  
     width:120;;  
     height:80;  
     overflow-x:auto;  
     overflow-y:auto;  
     float: right;  
     border-style.:solid;  
     border-width:;   
     border-color:blue  
  }  
</style>  
<script type="text/javascript" language="javascript">  
function setStyle()  
{  
//145的由来LeftDiv的left+width+15（15是滚动条的宽度）  
document.getElementById("a").style.width=document.body.clientWidth - 145;  
//130的由来LeftDiv的left+width  
document.getElementById("c").style.width=document.body.clientWidth - 130;  
//55的由来TopDIV的top+height+15（15是滚动条的宽度）  
document.getElementById("b").style.height=document.body.clientHeight - 55;  
//40的由来TopDIV的top+height  
document.getElementById("c").style.height=document.body.clientHeight - 40;  
}  
</script>  
   
</head>  
<body onresize="setStyle();" onl oad="setStyle();">  
   
<div id='a' class="TopDIV">  
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
</div>  
   
<div id='b' class="LeftDIV">  
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
</div>  
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"  
 class="MainDIV">  
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ  
</div>  
</body>  
</html>  
</SPAN> 

<html> 
<head> 
<style type="text/css"> 
  .TopDIV 
  {  
     position:absolute; 
     left:130px; 
     top:10px; 
     width:105; 
     height:30; 
     overflow-x:hidden; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:red 
  } 
  .LeftDIV 
  {  
     position:absolute; 
     left:10px; 
     top:40px; 
     width:120; 
     height:60; 
     overflow-x:hidden; 
     overflow-y:hidden; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:yellow 
  } 
  .MainDIV 
  {  
     position:absolute; 
     left:130px; 
     top:40px; 
     width:120;; 
     height:80; 
     overflow-x:auto; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:blue 
  } 
</style> 
<script type="text/javascript" language="javascript"> 
function setStyle() 
{ 
//145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
document.getElementById("a").style.width=document.body.clientWidth - 145; 
//130的由来LeftDiv的left+width 
document.getElementById("c").style.width=document.body.clientWidth - 130; 
//55的由来TopDIV的top+height+15（15是滚动条的宽度） 
document.getElementById("b").style.height=document.body.clientHeight - 55; 
//40的由来TopDIV的top+height 
document.getElementById("c").style.height=document.body.clientHeight - 40; 
} 
</script> 
  
</head> 
<body onresize="setStyle();" onl oad="setStyle();"> 
  
<div id='a' class="TopDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
  
<div id='b' class="LeftDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;" 
 class="MainDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
</body> 
</html>

滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.

 

标签：颜色,HTML,width,样式,滚动条,color,scrollbar,border
From： https://www.cnblogs.com/frizenors/p/16820171.html

相关文章

  • 大家都会的HTML基础知识-HTML教程(1)
    01、HTML基础简介HTML(HyperTextMarkupLanguage，超文本标记语言)不是一门编程语言，而是一种用于定义内容结构的标记语言，用来描述网页内容，文件格式为.html。HTML由一系......
  • dhtml(灯火通明类似的词语)
    MSDN里的DHTML文档都是英文看不懂啊,哪有中文DHTML文?MSDN只有英文版的，所谓的中文版也就里面极小一部分弄成中文了。你可以在一些论坛或百度百科里面找你想要的内容的中文资......
  • #yyds干货盘点#【愚公系列】2022年10月 微信小程序-组件模板和组件样式
    一、组件模板组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。在组件模板中可以提供一个<slot>节点，用于承载组件引用......
  • Jquery 如何替换html字符串中标签属性值 ？？
    如何利用JQuery替换HTML字符串中的属性值呢？如html字符串有很多img标签，现在需要修改img的src值varhtml="<divstyle="text-align:center;font-size:40px;font-fami......
  • 前端开发——CSS样式
       1.CSS样式的三种引入方式 1.1内嵌式   1.2外联式     1.3行内式  三种引入方式用处：  2.基础选择器 ......
  • HTML标签-文件标签和文本标签
    HTML文件标签文件标签：构成html最基本的标签html：html文档的根标签head：头标签，用于去指定html文档的一些属性，还可以引入一些外部的资源（脑袋）title：标题标签（头部......
  • 606 Javascript_语法_与html结合方式 and 607 Javascript_语法_注释&数据类型
     Javascript_语法_与html结合方式ECMAScript：客户端脚本语言的标准1.基本语法1.与html相结合方式1、内部js；......
  • HTML概念介绍以及快速入门
    HTML概念介绍概念：HyperTextMarkupLanguage超文本标记语言的缩写超文本：超文本是用超链接的方法，将各种不同空间的文件信息组织在一起的网状文本（链接作用）......
  • 设置字体样式，文本装饰
     1.设置字体类型（如下）注意：字体尽量设置成通用的，否则如果用户系统没有该种字体就不能显示  2.设置字体的粗细字体粗细100—900，100最细，900最粗  3.设置字......
  • Vue组件template中html代码自动补齐设置
    1、vscode设置==>扩展==>JSON==>在settings.json中编辑2、在最后}前添加如下代码保存文件即可//自动补全模板字符串"emmet.triggerExpansionOnTab":true,......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99