今天做iframe中滚动条时遇到一个问题,就在iframe中如果内容没有超出 页面范围右边垂直滚动条的位置会显示滑轨,当页面内容超过页面高度时,滑轨上会有垂直滚动条。当内容没有超出范围使垂直滚动条和滑轨均不显示,使页面内容扩展到最右边;只在当页面内容超过页面高度时,显示滑轨和垂直滚动条!在网上搜了下,并记录了下

GOOGLE到一些有用的资料:

[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

转载:页面滚动条处理相关推荐

  1. (转)页面滚动条(scrollbar)颜色设置详解

    一 些网站为了整体效果,会调整页面滚动条的颜色,但是,这个解决方案只有 KDE 上的 Konqueror 浏览器和 Windows 上的 Internet Explorer 5.5+ 才支持,发在这里 ...

  2. 保存div与页面滚动条的位置

    1/**//// <summary>  2        /// 保存div与页面滚动条的位置  3        /// </summary>  9        /// & ...

  3. js获取window窗口高度(页面滚动条可滚动高度) - 代码篇

    js中获取窗口高度的方法 取窗口滚动条滚动高度 (如下文 · 截图) 一. javascript 和 jquery代码: //原生 javascript 代码: let scrollHeight = ...

  4. html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...

  5. html页面滚动条设置

    来源于: http://pichcar.iteye.com/blog/478423 作者:pichcar <html> <head> <meta http-equiv=& ...

  6. 【Axure交互教程】 隐藏页面滚动条的3种方法

    作品名称:隐藏页面滚动条的3种方法 作品编号:Case001 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...

  7. 用css去自定义页面滚动条的样式(谷歌浏览器,PC端)

    用css去自定义页面滚动条的样式(谷歌浏览器,PC端) 常用的自定义滚动条样式,只需要用到三个属性 1.::-webkit-scrollbar 2.::-webkit-scrollbar-track ...

  8. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedo ...

  9. js处理web页面滚动条

    应用场景:当页面上的元素超过一屏后,待操作的元素在页面可视区域外时,是不能直接定位到,会报元素不可见错误:is not clickable at point!! 解决办法:要将待操作的元素滚动到可视区 ...

最新文章

  1. 微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
  2. LaTeX技巧006:使用pdfLaTeX时,添加PDF文件属性的方法
  3. C语言再学习 -- printf、scanf占位符
  4. snowflake分布式自增长id的java实现
  5. springboot 多数据源 读写分离 AOP方式
  6. 考研心路历程2021北京交通大学计算机学院软件工程
  7. fiddler命令cls/select
  8. mysql中sql批量插入_sql中insert如何批量插入多条记录?
  9. 黑马程序员之《String Buffer,包装类》
  10. Qt保存日志调试信息输出文件
  11. iOS端Mock GPS定位 —— 测试、开发、玩游戏、发朋友圈等等,你都用得上(转)
  12. 用TensorFlow为图片添加字幕
  13. Springboot+ssm高校会议预约系统javaweb
  14. wincc c 语言改颜色,wincc常用c脚本小草设置
  15. graylog3.0收集飞塔防火墙日志
  16. 作业2(4)求m和n之间的和
  17. 创新性中小企业认定标准
  18. 高斯分布的积分期望E(X)方差V(X)的理论推导
  19. Winds系统下python的基本环境配置
  20. 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

热门文章

  1. Java深入 - servlet和Spring的DispatcherServlet详解
  2. 鸿蒙公测报名表填写,鸿蒙2.0公测报名审核要多久_鸿蒙2.0公测报名审核时间
  3. MySQL模糊匹配查询LIKE,REGEXP,IN
  4. eclipse error
  5. 【LOJ】#3123. 「CTS2019 | CTSC2019」重复
  6. script async和defer
  7. geolocation/ 百度地图api Geolocation 定位当前城市信息
  8. SQL Server游标+延迟执行简介
  9. [置顶] Android adb root权限
  10. 转载—android 媒体库数据更新解决办法总结