<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>页面滚动条颜色设置隐藏技巧说明-网页特效观止-网页特效代码|JsCode.CN|</title>
</head>
<body>
<p>1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）<br>
overflow-x水平方向内容溢出时的设置<br>
overflow-y垂直方向内容溢出时的设置<br>
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。<br>
<br>
2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）<br>
scrollbar-arrow-color上下按钮上三角箭头的颜色<br>
scrollbar-base-color滚动条的基本颜色<br>
scrollbar-dark-shadow-color立体滚动条强阴影的颜色<br>
scrollbar-face-color立体滚动条凸出部分的颜色<br>
scrollbar-highlight-color滚动条空白部分的颜色<br>
scrollbar-shadow-color立体滚动条阴影的颜色<br>
<br>
我们通过几个实例来讲解上述的样式属性：<br>
1.让浏览器窗口永远都不出现滚动条<br>
没有水平滚动条<br>
<body style="overflow-x:hidden"><br>
没有垂直滚动条<br>
<body style="overflow-y:hidden"><br>
没有滚动条<br>
<body style="overflow-x:hidden;overflow-y:hidden">或<body <br>
style="overflow:hidden"><br>
<br>
2.设定多行文本框的滚动条<br>
<br>
没有水平滚动条<br>
<textarea style="overflow-x:hidden"></textarea><br>
<br>
没有垂直滚动条<br>
<textarea style="overflow-y:hidden"></textarea><br>
<br>
没有滚动条<br>
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea><br>
或<textarea style="overflow:hidden"></textarea><br>
<br>
3.设定窗口滚动条的颜色<br>
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red"><br>
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。<br>
加上一点特别的效果：<br>
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"><br>
<br>
4.在样式表文件中定义好一个类，调用样式表。<br>
<style><br>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}<br>
</style><br>
这样调用：<br>
<textarea class="coolscrollbar"></textarea></p>
</body>
</html>
分享到：
相关推荐
vue自定义浏览器滚动条(已兼容ie)
滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改
WPF的scrollview滚动条设置，包括上一页下一页上一条吓一条设置
当页面滚动时(监听scroll事件)，浏览器滚动条处于最顶部时，隐藏“返回顶部”按钮，当滚动条继续向下滚动时，动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值，如果这个值大于某个特定的数字...
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
主要介绍了微信小程序设置滚动条过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
DreamWeaver提供了强大的CSS定制功能，但出于兼容性的考虑，没有提供滚动条风格设置的CSS定制，本程序是一个可视化的IE页面滚动条CSS代码生成器。 可以选择或直接输入颜色值，直接看到效果，CSS代码自动生成，可...
dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，在说出解决方案前先来普及一下jquery关于定位的几个方法
滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条） 支持键盘...
主要介绍了JS实现的页面自定义滚动条效果,涉及JavaScript结合css设置页面滚动条样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
设置页面加载时滚动条自动滚到底的方法： jQuery： 代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript： 代码如下: [removed] = ...
下面小编就为大家带来一篇jsp中为表格添加水平滚动条的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
给Emlog博客顶部添加一个动态百分比顶部滚动条，可以选择设置图片、渐变背景样式。这个动态效果出现好久了，然后在js监测屏幕下拉值，最后用css改变图片和背景的宽度，从而实现动态的效果。目前支持10多种样式供选择...
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
给emlog博客顶部添加一个动态百分比顶部滚动条，能够选择设置图片、突变背景款式。这个动态效果呈现良久了，然后在js监测屏幕下拉值，最后用css改动图片和背景的宽度，从而完成动态的效果。目前支持10多种款式供选择...
一、去除滚动条方法 给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给...这个跳动对用户体验来十分不好，因此给body添加一下右padding，大小为滚动条的宽度。windows平台下滚动条的宽度为17px，linux平
安装U盘里下载的“滚动条变色”插件， 安装到DW后，如何正常应用该特效插件？ 答：打开DW ， 1、新建页面——代码——删除<html>前面的所有代码！ 2、鼠标定位在<head>之后——点击DW“设计”——点击...
jQuery单页面滚动点击顶部导航条页面滚动到设置的描点位置
在实现锚点定位的时候发现无法设置滚动条的位置。 在Vue中，使用 document.body.scrollTop=952 无法设置滚动条的高度。 document.body.scrollTop一直是0 原因 因为vue的页面指定了DTD，即指定了DOCTYPE时，使用...