尊旭网
当前位置: 尊旭网 > 知识 >

html滚动条

时间:2024-10-09 08:33:44 编辑:阿旭

HTML中的滚动条有哪些使用技巧

这次给大家带来HTML中的滚动条有哪些使用技巧,HTML中的滚动条的哪些使用技巧的注意事项有哪些,下面就是实战案例,一起来看一下。我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,只需要在.aspx的源码中的顶端部分加上 MaintainScrollPositionOnPostback ="true"即可。以上这个现象就是在学习牛腩新闻发布系统的时候遇到的,下面就给大家来分享一些其他关于html滚动条的使用技巧 (1)隐藏滚动条 (2)如何在单元格或图层中出现滚动条 (3)javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等 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;} 说明: 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)屏蔽选择,右键等 下面的这个小例子是 实现滚动条根据窗体的大小自动设置 .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 } 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; } 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高. 相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!相关阅读:input的文本框怎么做到和img验证码html如何实现鼠标悬停提示A标签内容怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框


HTML滚动条的属性是什么?

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

DIV怎么设置滚动条

在实际操作过程中我们知道,很多DIV都是不够显示全部的内容,那么一定就要设置滚动条,今天就来教大家DIV的滚动条设置。对div设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,接下来为大家介绍。一、CSS基础认识 - TOPoverflow-y:scroll; 总是显示纵向滚动条overflow-y:visible : 不剪切内容也不添加纵向滚动条了解:overflow-y手册http://www.divcss5.com/shouce/c_overflowy.shtmloverflow-x:scroll; 总是显示横向滚动条overflow-x:visible : 不剪切内容也不添加横向滚动条了解:overflow-x手册http://www.divcss5.com/shouce/c_overflowx.shtml了解css overflow二、div设置滚动条实例 DIVCSS5通过对第一个DIV对象设置div宽度、div高度、div边框样式,并在DIV盒子里添加演示文字内容,第二个盒子设置相同的CSS样式,盒子文字内容相同,并设置横向和纵向滚动条,观察效果。第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“divcss5-b”。1、具体完整html源代码如下: div滚动条 在线演示 www.divcss5.com .divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00} .divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} /* css注释说明:设置第二个盒子与第一个盒子间距为10px,并设置了横纵滚动条样式 */ 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊 为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.divcss5-b”设置了X和y(横向和纵向的滚动条样式。)第一个盒子“.divcss5-a”内容过多而溢出了DIV盒子,第二个盒子设置了滚动条样式,所以没有溢出,纵向右侧(Y)出现了可下拉上拉滚动条样式,横如何隐藏CSS div滚动条DIV默认是没有滚动条的,如果加了滚动条样式,去掉后滚动条自然就会消失。如果是框架iframe出现的滚动条,如果要想X横向隐藏滚动条,只需要设置overflow-x:visible或overflow-x:hidden;如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。相关阅读:css波纹动画在HTML中插入空格的几种方法添加或删除 HTML dom元素