首页 >

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

web前端|js教程JS弹出层遮罩,隐藏背景页面滚动条细节优化分析【javascript】
JS,弹出层遮罩,隐藏背景,页面滚动条
web前端-js教程
A、去除滚动条方法
房产销售培训网站源码,vscode没有小灯泡,ubuntu 设置路由,tomcat 繁忙线程,sqlite3设置自增,爬虫用哪种语言写最好看,php 动态 表格,郑州seo服务哪家好,淘宝网站源码php,网页动态加载源代码,苹果cms模板修改lzw
给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性
新闻发布网站源码asp,vscode高亮后字体颜色,ubuntu搭建oauth,项目启动不了tomcat,如何练习爬虫,php获取请求body,资阳seo优化报价单,帝国网站自定义内容页导航,怎样更改织梦模板下的图片lzw
样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。
微信开发考试系统源码,ubuntu显卡不兼容,tomcat1.7免安装板,爬虫换行字符,php页面加载失败优化,黄南seo优化lzw
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有内联样式则需要累加,否则会清空原有样式。

B、去除隐患其它方法滚动页面(防止误操作)

隐藏滚动条后,用鼠标滚轮滚动页面确实不会动了,以为这就ok了,不是…

键盘快捷键也可以操作浏览器的一些操作,与滚动页面相关的,比如:上下按键、翻页按键等。针对键盘快捷键,需要取消他们的默认操作。

C、添加弹出层样式

给body添加全局样式(兼容IE6)

height:100%;

给弹层添加滚动样式

overflow-y: auto;width: 100%;height: 100%;left:0;_padding:0 17px 0 0;   //IE6bug,子元素绝对定位后对于父元素的padding依然有效


JS弹出层遮罩,隐藏背景页面滚动条细节优化分析【javascript】
  • vue 渲染页面后div的滚动条保持在最底部办法
  • vue 渲染页面后div的滚动条保持在最底部办法 | vue 渲染页面后div的滚动条保持在最底部办法 ...

    JS弹出层遮罩,隐藏背景页面滚动条细节优化分析【javascript】
  • 使用javascript控制cookie显示和隐藏背景图【javascript】
  • 使用javascript控制cookie显示和隐藏背景图【javascript】 | 使用javascript控制cookie显示和隐藏背景图【javascript】 ...