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>


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)隐藏滚动条

<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:color;设置或检索滚动条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中marquee标签的用法

<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 ---滚动条样式代码及<marquee>标签的用法;的更多相关文章

  1. QTableView表格滚动条样式(QSS真是细致到家了)

    环境:Qt5.3 IDE:QtCreator 效果预览: 垂直与水平滚动条样式 代码: ui->QTableView->verticalScrollBar()->setStyleSh ...

  2. HTML滚动文字代码 marquee标签

    看到一个HTML滚动文字代码 marquee标签的内容,非常全面,而且觉得有点意思,可以让大家为自己博客或者网站设置一个漂亮的滚动文字. 以下是原文: <marquee style=" ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. diy 滚动条 样式 ---- 核心代码

    参考自 : https://blog.csdn.net/qq_38881495/article/details/83689721 .chapter_data position relative wid ...

  5. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  6. duilib让不同的容器使用不同的滚动条样式

    装载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时,一直是通过设置xml ...

  7. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  8. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  9. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

随机推荐

  1. soap

    sudo apt-get update apt-get install php-soapphp-config --configure-options --enable-soap php -i | gr ...

  2. C++-类的const成员变量

    当类中用到一些固定值时,希望将其定义为const成员变量,防止被修改. 但因为const成员变量因为初始化之后就不能修改,因此只能在构造函数的初始化列表中初始化 如果是数组,则没有办法在初始化列表中初 ...

  3. java获取页面编码

    文章出自:http://babyjoycry.javaeye.com/blog/587527 在此感谢原作者...\(^o^)/~   最近研究抓取网页内容,发现要获取页面的编码格式,Java没有现成 ...

  4. 常见的Web负载均衡方法

    用户手动选择 通过在主站首页入口提供不同线路,不同服务器链接的方式,来实现负载均衡.在一些提供下载业务的网站中比较常见,如:华军软件园. DNS轮询 大多域名注册商都支持对同一主机名添加多条A记录,这 ...

  5. Ajax get方法 IE 下乱码

    每个浏览器处理编码的格式不同. ajax使用utf-8来编码发送数据,ie在发送时并没加上charset=utf-8,从而导致乱码(IE默认使用iso-8859-1编码) JavaScript代码: ...

  6. Project和Module的介绍

    Project 和 Module 介绍 这两个概念是 IntelliJ IDEA 的必懂知识点之一,请务必要学会. 如果你是 Eclipse 用户,并且已经看了上面给的链接,那 IntelliJ ID ...

  7. NSString和data转换

    NSStringEncoding enc = CFStringConvertEncodingToNSStringEncoding(kCFStringEncodingGB_18030_2000); NS ...

  8. http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx

    http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx

  9. php大力力 [018节]如何联系大力力

    有事儿就注册博客园,给我发 博客园站内的 短消息呗,唉,没有人联系我呀,啦啦啦,爱我爱我,快点爱我 2015-08-26 php大力力018.如何联系大力力

  10. linux常用命令:2权限管理命令

    权限管理命令 1.权限管理命令:chmod 命令名:chmod 命令英文原意:change the permissions mode of a file 命令所在路径:/bin/chmod 执行权限: ...