html滚动条使用,以及页面有多个div块,如何让body页面不使用滚动条,只在某个div内使用滚动条
2017-11-29 15:42
567 查看
滚动条基本知识:
建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。
2,页面有多个div块,如何让body页面不使用滚动条,只在某个div内使用滚动条
先说说正常显示的,显示滚动条和不显示滚动条,效果图如下:
代码:
使用js,不显示上图最右边的总的滚动条
代码:
就加了一行代码;
使用jquery实现的代码:
注:1,不显示总的滚动条,会导致页面内容过多事不能显示超出页面高度的内容,所有要注意协调。
2,另外可能会出现关闭了整个body的滚动条后,发现div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。
建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。
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:h 4000 idden;"></textarea>
2,页面有多个div块,如何让body页面不使用滚动条,只在某个div内使用滚动条
先说说正常显示的,显示滚动条和不显示滚动条,效果图如下:
代码:
<html> <body> <h3>iframe 中始终显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <h3>iframe 中从不显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </body> <script> </script> </html>
使用js,不显示上图最右边的总的滚动条
代码:
<html> <body> <h3>iframe 中始终显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <h3>iframe 中从不显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </body> <script> document.documentElement.style.overflowY = 'hidden' </script> </html>
就加了一行代码;
使用jquery实现的代码:
<html> <body> <h3>iframe 中始终显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <h3>iframe 中从不显示滚动条:</h3> <iframe src ="/index.html" width="200" height="200" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </body> <script> $(document.body).css({ "overflow-y":"hidden" }); </script> </html>
注:1,不显示总的滚动条,会导致页面内容过多事不能显示超出页面高度的内容,所有要注意协调。
2,另外可能会出现关闭了整个body的滚动条后,发现div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。
相关文章推荐
- Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》
- 使用PS切片工具进行切片生成div布局的页面的方法以及如何确定图片中某个点在图片中的位置
- HTML网页打印去掉页眉页脚,以及如何控制不想打印出的页面元素【梨城在线】
- 如何在多个页面使用同一个HTML片段《续》
- [转]如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
- 使用div中的滚动条设置解决超屏页面的问题【代码片段】
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)
- 如何在多个页面使用同一个HTML片段
- VC++如何使用微软提供的Mshtml库解析html页面元素
- 如何在多个页面使用同一个HTML片段《续》
- Asp.net 中的div 滚动条以及Css 的使用....
- html页面中运用CSS为层(div)元素添加滚动条
- 使用 Response.Write 向页面body中输出指定html
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- 如何在多个页面使用同一个HTML片段
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)
- HTML控件ID和NAME属性的区别,以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- html页面中运用CSS为层(div)元素添加滚动条