html中滚动条属性设置
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
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立体滚动条阴影的颜色
我们通过几个实例来讲解上述的样式属性：
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>
原帖地址：http://www.cnblogs.com/JensonBin/archive/2011/02/23/1962099.html
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
html中滚动条属性设置相关推荐
- Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置
Iframe 用法的详细讲解(属性.透明.自适应高度)和html中滚动条属性设置 scrollbar属性.样式详解 1． overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overfl ...
- Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法 方式一:直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...
- html的text滚条设置,textarea 滚动条属性设置
scrollbar属性.样式详解 1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上 ...
- Scrollbar中滚动条的设置
insideOverlay 默认值,表示在padding区域内并且覆盖在view上 insideInset 表示在padding区域内并且插入在view后面 outsideOverlay 表示在p ...
- CSS中 滚动条样式设置
滚动条样式设置 ::-webkit-scrollbar滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块---滑块,能向上向下移动(或往左往右移动,取决于是垂直滚动条 ...
- Tab控件中滚动条的设置
取消Tab控件中滚动条的方法: 选择Resources View视图,选择Tab上放置的Page页对话框,点击右键选择Properties->Styles,勾选No scroll选项即可
- html 设置readonly属性,js与html中readonly属性设置对比
说明: readonly属性在html标签里使用不区分大小写. 在js中使用,IE不能识别"readonly",要用"readOnly". 下面对比下IE与FF ...
- extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client
(给前端大全加星标,提升前端技能) 作者:前端下午茶 公号 / SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...
- extjs中滚动条属性_前端学习随笔6 盒模型及相关属性
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 一 心得体会 最大的收获是第一次知道了outline(轮 ...
- 网页中滚动条的设置和修改
一.通过css设置滚动条 在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了.因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完.例如有:Google Chrome. ...
最新文章
- 送书啦！40本经典书籍任你挑！
- poj1068解题报告（模拟类）
- Please select Android SDK
- [Swift]随slider变化而变化的圆
- JavaScript Dom编程艺术
- 甲骨文宣布供应链管理云平台支持LogFire仓库管理系统
- json_encode ajaxReturn getJSON
- 创业中的“孙子兵法”
- ResNet及其变种的结构梳理、有效性分析与代码解读（PyTorch）
- 成为Linux内核高手的四个方法
- wordprss只显示一个当前主题 问题的解决
- 医院his系统机房服务器,医院信息中心机房如何建设
- 软件测试方法_边界值分析法
- android接口的作用是什么意思,Android开发中接口的用处
- Android之微信开放平台创建应用
- 高性能浏览器网络（High Performance Browser Networking） 第四章
- firefox上传文件
- uni-app AppStore推广内购、SKPaymentTransactionObser
- jkd8新特性 StreamAPi流
- 宝塔linux面板访问不了