怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动？
可用的方法比较多，比较常见的是使用CSS。1、使用CSSCSS让DIV固定位置不随滚动条而滚动， fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。（1）我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：html{overflow:hidden;} body{height:100%;overflow:auto;} （2）我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上。html{overflow:hidden;}body{height:100%;overflow:auto;}#rightform form{position:absolute;right:30px;top50px;} （3）页面由左侧菜单和右侧主体内容构成，右侧内容可能会很多，会出现翻屏。现在是要无论页面怎么翻屏滚动，左侧的菜单始终在左侧。请看CSS解决方案。#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%; background:#ffc; overflow-y:auto;} #content{padding:10px 10px 10px 190px;}（4）我设置左侧div#site_nav的样式，将其位置固定，即position:fixed，并且设置固定宽度，高度为100%，为了区分右侧内容，我设置了背景颜色background:#ffc。接着，我将内容部分div#content设置其padding值，注意关键是padding-left:190px，只有大于左侧菜单宽度的padding值，才能使右侧主体内容部分不会与左侧菜单重叠。2、不使用JS：无标题文档ul{margin:0;padding:0;}li{list-style-type:none; float:left; margin-left:10px; line-height:30px;}sddsdadsa3、html,body {overflow:hidden;margin:0px;width:100%;height:100%;}.virtual_body {width:100%;height:100%;overflow-y:scroll;overflow-x:auto;}.fixed_div {position:absolute;z-index:2008;bottom:20px;left:40px;width:800px;height:40px;border:1px solid red;background:#e5e5e5;}I am still here!I am content !分析：1、html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。2、.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。3、.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动？
可用的方法比较多，比较常见的是使用CSS。1、使用CSSCSS让DIV固定位置不随滚动条而滚动，fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。（1）我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：html{overflow:hidden;} body{height:100%;overflow:auto;} （2）我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上。html{overflow:hidden;}body{height:100%;overflow:auto;}#rightformform{position:absolute;right:30px;top50px;} （3）页面由左侧菜单和右侧主体内容构成，右侧内容可能会很多，会出现翻屏。现在是要无论页面怎么翻屏滚动，左侧的菜单始终在左侧。请看CSS解决方案。#site_nav{position:fixed;width:160px;padding:6px10px;height:100%; background:#ffc;overflow-y:auto;} #content{padding:10px10px10px190px;}（4）我设置左侧div#site_nav的样式，将其位置固定，即position:fixed，并且设置固定宽度，高度为100%，为了区分右侧内容，我设置了背景颜色background:#ffc。接着，我将内容部分div#content设置其padding值，注意关键是padding-left:190px，只有大于左侧菜单宽度的padding值，才能使右侧主体内容部分不会与左侧菜单重叠。2、不使用JS：无标题文档ul{margin:0;padding:0;}li{list-style-type:none;float:left;margin-left:10px;line-height:30px;}sddsdadsa3、html,body {overflow:hidden;margin:0px;width:100%;height:100%;}.virtual_body {width:100%;height:100%;overflow-y:scroll;overflow-x:auto;}.fixed_div {position:absolute;z-index:2008;bottom:20px;left:40px;width:800px;height:40px;border:1px solid red;background:#e5e5e5;}I am still here!I am content !分析：1、html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。2、.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。3、.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
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、打开软件，文件，新建，html文件，命名随意，我这里命名hday。软件自动生成html的基本构造。首先保存一张背景图片放在img文件夹。2、在里声明 body{background-attachment: fixed;background-image: url(../img/a3.jpg) ;}。3、现在背景设置好了，加入内容，看看效果。在内写入内容。运行。滚动鼠标图片是不是不动的。4、点击运行。点击文件，新建，css文件。命名。输入body{background-image: url(../img/a3.jpg);background-attachment: fixed;}。5、返回html。在内输入，保存，运行。效果和之前一样。
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元素
