文档章节

滚动条引起页面抖动问题

宿管小阿姨
 宿管小阿姨
发布于 2018/02/28 16:04
字数 233
阅读 105
收藏 0

项目过程中,很常见的 点击按钮 弹出遮罩和菜单,但同时可能会要求禁止滚动条滚动,这样可以

/* 无遮罩时 */
body {
    overflow: auto;
}
/* 有遮罩时 */
body {
    overflow: hidden;
}

但是这样会因为滚动条的原因,使页面元素产生抖动(即页面元素产生位移)

想了很多办法,最终发现:

1.使用html的滚动条代替body的滚动条

2.有遮罩时,body 设置溢出隐藏,这样html的滚动条存在,但是由于没有溢出(溢出部分已经被body隐藏了),所以html的滚动条时无法滚动的(即遮罩下面的页面内容不会滚动)

代码:

html {
    /* 滚动条一直存在,由溢出时可以滚动,无溢出时无法滚动,但是存在 */
    overflow: scroll;
}
/* 有遮罩时 */
body {
    overflow: hidden;
}
/* 无遮罩时 */
body {
    overflow: auto;
}

 

© 著作权归作者所有

宿管小阿姨
粉丝 0
博文 11
码字总数 4193
作品 0
私信 提问
解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位...

Deacyn
2015/09/18
9.3K
7
Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条 Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- ove...

517270667
2017/07/12
0
0
解决IE6不支持position:fixed问题

很少的时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,...

spademan
2013/10/25
178
0
Chorme下编辑MarkDown滚轮操作问题

Chorme 版本 56.0.2924.87 (64-bit) 在编辑MD文本时,用滚轮进行下滑操作不成功(页面抖动后回到顶部),滚动条操作正常,密码忘了所以其他浏览器我没试

阿达xi
2017/03/23
77
1
KindEditor 3.4.4 发布

3.4.4版本是3.4.3版本的BUG修复版本,使用3.4.3版本的同学们建议升级到3.4.4版本。 修改过的文件: * kindeditor.js * skins/default.css * skins/tinymce.css * skins/default/default.gif ...

红薯
2010/06/02
405
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
31分钟前
4
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
35分钟前
4
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
38分钟前
3
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
50分钟前
3
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
56分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部