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. struts2 通用标签

    *property 标签 property 标签用来输出一个值栈属性的值, 对于对象栈,打印值栈中对应的属性值:对于Map 栈,打印request,session,application的某个属性值或 ...

  2. STL-算法

    #include <algorithm> 1. max_element(v.begin(), v.end()); 注意,所有的区间全部是半开区间,如果数组包含20-40,通过find找出2 ...

  3. java.lang.InstantiationException

    java.lang.InstantiationException  出现这种异常的原因通常情况下是由于要实例化的对象是一个接口或者是抽象类等无法被实例化的类.

  4. WP8.1 Study2:MapControl控件的应用

    总的界面布局如下:

  5. 【转】 JAR、WAR、EAR的使用和区别

    Jar.war.EAR.在文件结构上,三者并没有什么不同,它们都采用zip或jar档案文件压缩格式.但是它们的使用目的有所区别: Jar文件(扩展名为. Jar,Java Application Ar ...

  6. mac终端下运行shell脚本

    最近公司要弄关于IOS下自动化打包的东西,研究了用命令行的形式来代替手工的方式来处理.即: 用xcodebuild 和xcrun  语法来进行脚本实现.    但由于语法的结构够了,另一个问题产生了, ...

  7. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  8. 2016-1-6第一个完整APP 私人通讯录的实现 3:添加联系人

    一:创建模型对象:contact用于存放数据,也便于读取加载 #import <Foundation/Foundation.h> @interface contact : NSObject ...

  9. 永不消逝的电波(三):低功耗蓝牙(BLE)入门之如何调戏别人的小米手环

    0×00 前言 蓝牙(Bluetooth),一种无线技术标准,用来让固定与移动设备,在短距离间交换数据,以形成个人局域网(PAN).其使用短波特高频(UHF)无线电波,经由2.4至2.485 GHz的 ...

  10. javaweb-dbutils

    package cn.itcast.demo; import java.io.File;import java.io.FileNotFoundException;import java.io.File ...