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. 记一个有想法却没能力实现的硬件产品——mp3校时闹钟

    枕头旁的闹钟,我想大家都用过,很便宜.用一节干电池供电.但其最大的缺点就是不太准,不能校时. 电池啥事用光,也不知道.钟是走的很慢,没按时闹,搞的自己迟了到. 于是就有了我的漫长思考过程... 先说手 ...

  2. 深入理解dispatch_queue

    Grand Central Dispatch是苹果过去几年创造出来的非常强大的API,在Let's Build系列的最新一期中,我们将探究dispatch_queue基础功能的重新实现.该主题是Rob ...

  3. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  4. Core Text概述

    本文是我翻译的苹果官方文档<Core Text Overview> Core Text框架是高级的底层文字布局和处理字体的技术.它在Mac OS X v10.5 and iOS 3.2开始 ...

  5. JVM-对象

    1.对象的创建 当虚拟机遇到一条new指令时,首先去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化.如果没有,那必须先执行相应的类加 ...

  6. Coudera-Manager/CDH的安装和部署

    由于之前部署的集群采用的是用apache hadoop的方式来实现,但是考虑到运维的成本问题,下面将apache hadoop转换成cloudera cdh.下面主要讲解一下cloudera cdh的 ...

  7. iOS7中计算UILabel中字符串的高度

    iOS7中计算UILabel中字符串的高度 iOS7中出现了新的方法计算UILabel中根据给定的Font以及str计算UILabel的frameSize的方法.本人提供category如下: UIL ...

  8. 12-27cell常用的属性

    1.创建cell //    创建一个cell并且设置cell的风格 UITableViewCell *cell  = [[UITableViewCell alloc]initWithStyle:UI ...

  9. 利用strut2标签自动生成form前端验证代码

    利用strut2标签自动生成form前端验证代码,使用到的技术有1.struts2标签,如<s:form> <s:textfieled>2.struts2读取*Validati ...

  10. 官方文档学习之《start developing iOS apps(swift)》

    1.  let 关键字是用来定义常量的,任何类型的常量都可以进行定义:例如:定义字符串 let constantValue1 = "this is a string",也可以定义数 ...