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

在html网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在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各种滚动属性代码

<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 定义右下角拖动块的样式

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

设置窗口滚动条的颜色为红色
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>

这样调用：

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>

5.如何在单元格或图层中出现滚动条

<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:color;设置或检索滚动条3D表面的颜色；

scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；

scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；

scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；

scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。

scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色

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

HTML滚动条样式代码及使用技巧相关推荐

html带小方块的滚动图片代码,html滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
自定义滚动条样式默认滚动条样式如下↓ 首先设置div盒子然后给盒子开启滚动条这样超出高度或者宽度的内容将会被隐藏滚动就可以看到 // 开启y轴滚动条 overflow-y: auto; 修改后 ...
精美漂亮简洁的CSS滚动条样式及代码
使用css设置漂亮的滚动条样式使用css设置漂亮的滚动条样式使用css设置漂亮的滚动条样式滚动条漂亮美观样式好看的滚动条样式 html部分 <div id='scroll'> ...
CSS中关于滚动条样式设置的代码实例
因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在 ...
网页代码常用小技巧！(2)
网页代码常用小技巧!(2) [转] 41.变换网页的鼠标光标〈BODY style=CURSOR: url(http://203.73.125.205/~liangmi2/farmfrog01.cu ...
html中滚动条的代码是什么？如何设置html滚动条？
本篇文章主要介绍了关于html中的滚动条的代码,还有关于html 滚动条代码marquee标签属性的用法,具体的让我们一起来看这篇文章吧首先我们介绍html中的滚动条代码: 今天我们介绍这个html ...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
仅支持chrome的滚动条样式
http://www.xuanfengge.com/css3-webkit-scrollbar.html https://www.codeproject.com/tips/674478/customi ...
【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

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

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

HTML滚动条样式代码及使用技巧相关推荐

最新文章

热门文章