`
wsql
  • 浏览: 11778071 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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立体滚动条阴影的颜色


我们通过几个实例来讲解上述的样式属性:


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

分享到:
评论

相关推荐

    html滚动条 textarea属性设置

    本文介绍html滚动条 textarea属性设置:overflow内容溢出时的设置,scrollbar-3d-light-color立体滚动条亮边的颜色等等相关设置,有需要的朋友可以详细参考下,希望对你们有帮助

    HTML 隐藏滚动条和去除滚动条的方法

    1. html 标签加属性 XML/HTML Code复制内容到剪贴板 &lt;html lang="en" class="no-ie" style="overflow:hidden;"&gt;  2.body中加入以下代码 ...html页面去除滚动条的方法 为了防止以前的css文

    html 隐藏滚动条的简单实现

    1. html 标签加属性 XML/HTML Code复制内容到剪贴板 &lt;html lang="en" class="no-ie" style="overflow:hidden;"&gt;  2.body中加入以下代码 ...以上这篇html 隐藏滚动条的简单实现就是小编分享给

    html,小程序scroll-view去除滚动条

    子盒子添加内容溢出滚动条显示属性 overflow-y:scroll 并设置好宽高 可实现隐藏滚动条也可是滚轮触发滑动,使用此方法 无法监听window的滚动条事件。 代码示例: .box{ width:300px; height: 400px; overflow: ...

    JS滚动加载图片

    导入脚本 导入imgRunLoading.js脚本文件,或将其写入您的常用脚本文件中。 脚本代码片段提供未压缩和压缩过后的2种代码片段供你选择,请根据实际情况自行判断。...起效漏洞:仅对竖向滚动条起效,无视横向滚动条

    移动端html5判断是否滚动到底部并且下拉加载

    只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度,包含内边距,不包括x轴的滚动条高度、...

    零基础学HTML CSS源代码

    设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....

    vue中使用css预处理器scss解决body隐藏滚动条问题

    主要就是用了css的伪类元素::-webkit-scrollbar和本身盒子的overflow属性来进行控制,但是会出现一个问题,其余属性(例如:-mz- 、 scroll-width)主要是为了适配主流浏览器下均不出现滚动条。设置好就完成了。

    JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。...

    html中dom元素滚动条滚动控制小结详解

    不知道大家有没有遇到过这样的需求,在某个 dom 元素中添加新的子元素,然后要求如果新添加的新元素超出容器的范围,那么我们需要自动滚动到新添加的子元素的位置,如下图所示效果: 那么接下来我们一边学习一些 ...

    使用HTML开发商业网站-DIV+CSS布局 布局的其他属性课件.pptx

    使用HTML开发商业网站 布局其他属性 布局其他属性 overflow属性可以解决溢出问题,其基本...在需要时产生滚动条,即自适应所要显示的内容 scroll 溢出内容会被修剪,且浏览器会始终显示滚动条 布局其他属性 谢谢大家

    vue2滚动条加载更多数据实现代码

    解析:判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出...

    CSS常用属性

    scrollbar-face-color: 滚动条凸出部分的颜色 scrollbar-highlight-color: 滚动条空白部分的颜色 scrollbar-shadow-color: 立体滚动条阴影的颜色 scrollbar-3dlight-color: 滚动条亮边的颜色...

    ASP.net中保持页面中滚动条状态的代码

    其实Asp.net中page对象就有一个属性可以使页面提交或者更新数据后,返回页面原来位置,包括滚动条位置都可以保存。 代码如下: &lt;&#37;@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx...

    Js Div属性大全

    1.js 控制 DIV  2.js通过标签对DIV操作. ...clientHeight 获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。

    给DIV添加滚动条的实现代码

    如果要出现水平滚动条,则: overflow-x:auto同理,垂直滚动条为: overflow-y:auto如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative  例如: &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;...

    HTML5考试题.pdf

    HTML5考试题.pdf

Global site tag (gtag.js) - Google Analytics