转载:页面滚动条处理
[DIV+CSS]XHTML下的滚动条问题
1.xhtml下滚动条的颜色问题?
在原来的html的时候,我们可以这样定义整个页面的滚动条
body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#000; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
但是同样的代码,我们应用在 xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题
那么怎么才能在xhtml下应用滚动条样式呢?看下列代码
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#000; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的
"body"修改成"html"测试一下,发现依然可以实现效果。那到底是为什么呢?
在html和xhtml都通过,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。
(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别,但是如果你把页面的
XHTML 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过
你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的,虽然
这个页面的标准是html 4.01)
2.xhtml下frame页面横向滚动条的问题?
在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个
bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.
对于这个bug一般有3种解决方案,
方法1:
代码:
html { overflow-y: scroll; }
原理:强制显示ie的垂直滚动条,而忽略水平滚动条
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2:
代码:
html { overflow-x: hidden; overflow-y: auto; }
原理:隐藏横向滚动,垂直滚动根据内容自适应
优点:在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,
屏幕以外的内容会因为用户无法水平滚动,而看不到。
方法3:
代码:
body { margin-right: -15px; margin-bottom: -15px; }
原理:这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点:在视觉上解决了这个问题.,垂直滚动根据内容自适应
缺点:由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.
以上摘自:http://hi.baidu.com/sandmax/blog/item/43fd0e4668dbc6096b63e59f.html
附:强制的滚动条:
问题中的"修复"该bug的技术, 同样可以用于其它目的. 利用CSS, 你可以有效地在Mozilla Firefox和Internet Explorer中显示或者隐藏垂直及水平滚动条.
强制显示滚动条:
html { overflow: scroll; }
强制隐藏滚动条:
html { overflow: hidden; }
隐藏IE的水平滚动条:
html { overflow-x: hidden; }
隐藏IE的垂直滚动条:
html { overflow-y: hidden; }
强制显示IE的水平滚动条:
html { overflow-x: scroll; }
强制显示IE的垂直滚动条:
html { overflow-y: scroll; }
强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal; }
注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical; }
注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
转载于:https://www.cnblogs.com/conquer/archive/2008/10/28/1321101.html
转载:页面滚动条处理相关推荐
- (转)页面滚动条(scrollbar)颜色设置详解
一 些网站为了整体效果,会调整页面滚动条的颜色,但是,这个解决方案只有 KDE 上的 Konqueror 浏览器和 Windows 上的 Internet Explorer 5.5+ 才支持,发在这里 ...
- 保存div与页面滚动条的位置
1/**//// <summary> 2 /// 保存div与页面滚动条的位置 3 /// </summary> 9 /// & ...
- js获取window窗口高度(页面滚动条可滚动高度) - 代码篇
js中获取窗口高度的方法 取窗口滚动条滚动高度 (如下文 · 截图) 一. javascript 和 jquery代码: //原生 javascript 代码: let scrollHeight = ...
- html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...
- html页面滚动条设置
来源于: http://pichcar.iteye.com/blog/478423 作者:pichcar <html> <head> <meta http-equiv=& ...
- 【Axure交互教程】 隐藏页面滚动条的3种方法
作品名称:隐藏页面滚动条的3种方法 作品编号:Case001 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
- 用css去自定义页面滚动条的样式(谷歌浏览器,PC端)
用css去自定义页面滚动条的样式(谷歌浏览器,PC端) 常用的自定义滚动条样式,只需要用到三个属性 1.::-webkit-scrollbar 2.::-webkit-scrollbar-track ...
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedo ...
- js处理web页面滚动条
应用场景:当页面上的元素超过一屏后,待操作的元素在页面可视区域外时,是不能直接定位到,会报元素不可见错误:is not clickable at point!! 解决办法:要将待操作的元素滚动到可视区 ...
最新文章
- 微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
- LaTeX技巧006:使用pdfLaTeX时,添加PDF文件属性的方法
- C语言再学习 -- printf、scanf占位符
- snowflake分布式自增长id的java实现
- springboot 多数据源 读写分离 AOP方式
- 考研心路历程2021北京交通大学计算机学院软件工程
- fiddler命令cls/select
- mysql中sql批量插入_sql中insert如何批量插入多条记录?
- 黑马程序员之《String Buffer,包装类》
- Qt保存日志调试信息输出文件
- iOS端Mock GPS定位 —— 测试、开发、玩游戏、发朋友圈等等,你都用得上(转)
- 用TensorFlow为图片添加字幕
- Springboot+ssm高校会议预约系统javaweb
- wincc c 语言改颜色,wincc常用c脚本小草设置
- graylog3.0收集飞塔防火墙日志
- 作业2(4)求m和n之间的和
- 创新性中小企业认定标准
- 高斯分布的积分期望E(X)方差V(X)的理论推导
- Winds系统下python的基本环境配置
- 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
热门文章
- Java深入 - servlet和Spring的DispatcherServlet详解
- 鸿蒙公测报名表填写,鸿蒙2.0公测报名审核要多久_鸿蒙2.0公测报名审核时间
- MySQL模糊匹配查询LIKE,REGEXP,IN
- eclipse error
- 【LOJ】#3123. 「CTS2019 | CTSC2019」重复
- script async和defer
- geolocation/ 百度地图api Geolocation 定位当前城市信息
- SQL Server游标+延迟执行简介
- [置顶] Android adb root权限
- 转载—android 媒体库数据更新解决办法总结