关于HTML中的滚动条

今天学习牛腩新闻发布系统的时候牛腩老师讲到了滚动条的一些知识,提到的不多,只涉及到了滚动条的一部分知识,如果想深入研究的话这些是不够的,还要自己去搜集一些相关的知识

我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,只需要在.aspx的源码中的顶端部分加上 MaintainScrollPositionOnPostback ="true"即可。见下图:

以上这个现象就是在学习牛腩新闻发布系统的时候遇到的,下面就给大家来分享一些其他关于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 οncοntextmenu=self.event.returnValue=falseonselectstart="return false">

下面的这个小例子是实现滚动条根据窗体的大小自动设置
<html>
<head>
<style type="text/css">.TopDIV {  position:absolute; left:130px;top:10px;width:105;height:30;overflow-x:hidden;overflow-y:auto;float: right;border-style.:solid;border-width:; border-color:red}.LeftDIV {  position:absolute; left:10px;top:40px;width:120;height:60;overflow-x:hidden;overflow-y:hidden;float: right;border-style.:solid;border-width:; border-color:yellow}.MainDIV {  position:absolute; left:130px;top:40px;width:120;;height:80;overflow-x:auto;overflow-y:auto;float: right;border-style.:solid;border-width:; border-color:blue}
</style>
<script type="text/javascript" language="javascript">
function setStyle()
{
//145的由来LeftDiv的left+width+15（15是滚动条的宽度）
document.getElementById("a").style.width=document.body.clientWidth - 145;
//130的由来LeftDiv的left+width
document.getElementById("c").style.width=document.body.clientWidth - 130;
//55的由来TopDIV的top+height+15（15是滚动条的宽度）
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40的由来TopDIV的top+height
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</script></head>
<body οnresize="setStyle();" onLoad="setStyle();"><div id='a' class="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div><div id='b' class="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' οnscrοll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;" class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>

滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.

关于HTML中的滚动条相关推荐

python tkinter 滚动条_如何在tkinter窗口中添加滚动条？
我有一个tkinter程序:import urllib.request from tkinter import * root = Tk() root.iconbitmap(default='icon. ...
pyqt5 qscrollarea到达_在PYQT5中QscrollArea(滚动条)的使用方法
如下所示: import sys from PyQt5.QtWidgets import * class MainWindow(QMainWindow): def __init__(self,): s ...
在html中加入滚动条,html在div中显示滚动条
基本思路:滚动条要添加到内容部分的父标签上(div),内容部分不设置大小,父标签要明确设置大小,并且父标签要添加overflow样式,并设置成auto. 打开的效果如下: 这时可能有人会问,父div的 ...
java中向JTextArea中添加滚动条(垂直的和水平的)
这次在研究java的swing类时,在做一个实例时,发现了JTextArea中添加滚动条的问题,经过网上查找资料和自己测试发现有以下用法: 1.首先应该把JTextArea添加到一个JScrollPa ...
一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
html5 iframe隐藏滚动条,教你在iframe标签中制作滚动条样式
首先让我们看看HTMLiframe标签中关于滚动条的去留和保存: iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边 ...
html设置最小宽度滚动条,如何在CSS中设置滚动条的宽度？
现在许多项目中使用滚动条,在某些情况下,使用模拟滚动条. 许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度? 您可以在CSS中使用::-webkit-scrollb ...
C#让TextBox控件中的滚动条自动处于最下面
文章目录前言一.C#TextBox控件加入滚动条二.让TextBox控件中的滚动条自动处于最下面 1.双击TextBox控件总结前言 C#让TextBox控件中的滚动条自动处于最下面以下是 ...
将chart放入panel中出现滚动条_聊天场景在web前端开发中的体验与优化
在日常工作中,如下图的聊天场景是不是很熟悉,没错就是我们再熟悉不过的 QQ 和微信,一个正常的聊天界面大致上是长这个样子的: 这种聊天窗口的消息流有两个明显的特点: 最新的消息和滚动条初始位置需要在列 ...

关于HTML中的滚动条

关于HTML中的滚动条相关推荐

最新文章

热门文章