zoukankan      html  css  js  c++  java
  • JS弹出层遮罩,隐藏背景页面滚动条细节优化[转载]

    转载自http://www.iyunlu.com/view/Front-end/51.html
    作者头像

    JS弹出层遮罩,隐藏背景页面滚动条细节优化

    2012-03-22/已有510人看过/前端技术

    未命名.jpg

    做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。

    一、去除滚动条方法 给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。 body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下右padding,大小为滚动条的宽度。windows平台下滚动条的宽度为17px,linux平台下不同滚动器滚动条宽度不一致,可以用相关代码计算出滚动条的宽度,以下以windows平台为例。 相关代码:

    document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;’; document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;’;

    以上代码不考虑html或body是否有内联样式 ,如果html或body有内联样式则需要累加,否则会清空原有样式。

    二、去除隐患其它方法滚动页面(防止误操作) 隐藏滚动条后,用鼠标滚轮滚动页面确实不会动了,以为这就ok了,不是… 键盘快捷键也可以操作浏览器的一些操作,与滚动页面相关的,比如:上下按键、翻页按键等。针对键盘快捷键,需要取消他们的默认操作。

    三、添加弹出层样式 给body添加全局样式(兼容IE6)

    height:100%;

    给弹层添加滚动样式 overflow-y: auto; 100%; height: 100%; left:0; _padding:0 17px 0 0;      //IE6bug,子元素绝对定位后对于父元素的padding依然有效  

    以上方法,在lhgdialog V4版本源代码中都有很好的体现。云路科技友情提醒,方法虽好,请勿滥用,酌情考虑。

  • 相关阅读:
    Mac系统访问Windows共享文件的详细步骤
    登录名 '***' 拥有一个或多个数据库。在删除该登录名之前,请更改相应数据库的所有者。 (Microsoft SQL Server,错误: 15174)
    窗口中文乱码,永久解决方法
    Delphi 快捷键列表
    Delphi代码规范
    hpwin10重置系统
    记:lr请求响应中文乱码转码方法!
    VMware NAT和桥接
    记:grafana不展示仪表盘数据解决方法
    性能的几个常见指标
  • 原文地址:https://www.cnblogs.com/oneLight/p/2411505.html
Copyright © 2011-2022 走看看