用overflow-y 解决web页面抖动问题
页面抖动(左右抖动)让人视觉上很不爽。。
/**
original : php攻城师
**/
最开始我也以为是 layout 不一致的原因。。后来才发现是 因为垂直滚动条 时隐时现导致的
当页面内容在一页上没有展示完的时候, 浏览器右端会出现 垂直滚动条
反之, 这个 垂直滚动条默认是隐藏的
so, 当页面切换的时候,就会剧烈抖动起来。。。
解决方法:
添加 CSS :
body {
overflow-y: scroll;
}
备注:
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
| hidden | 内容会被修剪,并且其余内容是不可见的。 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
用overflow-y 解决web页面抖动问题的更多相关文章
- web页面乱码,JSP页面编码设置
解决Web页面访问出现乱码bug,JSP页面首行添加: <%@ page language="java" contentType="text/html; chars ...
- (转)解决bootstrap 模态框的页面抖动
使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 集群重启后启动ambari-server访问Web页面无法启动集群解决
集群重启后启动ambari-server访问Web页面无法启动集群解决 使用ambari部署的集群重新启动后,必须手动重启ambari-server和所有集群主机上的ambari-agent. amb ...
- 解决VS2010打开Web页面时经常由于内存较低而导致VS2010自动关闭的问题
在使用VS2010 开发Web应用程序的时候,经常打开一个Web页面进行编辑前台代码的时候要等待很久(甚至等了半天结果还挂掉,简直令人抓狂), 之前也在网上找了很多相关的方法,都没办法解决,今天无意中 ...
- ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法
ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...
- 记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)
1) 方案一, 使用Web Service 基础功能没问题, 只是在连接https (ssh) 网站时, 需要针对https进行开发 (即http 和https 生成两套接口, 不太容易统一 ). ...
- Juniper SRX550防火墙web页面CPU达到100%的故障解决办法
Juniper SRX550防火墙web页面CPU达到100%的故障解决办法 利用telnet远程连接主机,对web页面注销重新登录即可,在配置中输入命令:run restart web-manage ...
随机推荐
- 字符串分割函数Demo
#include <stdio.h> int getLength(char *string); int main(int argc, char **argv){ char str[12] ...
- JavaSE学习总结第14天_API常用对象4
14.01 如何校验一个QQ号码案例 import java.util.Scanner; /* * 校验qq号码. * 1:要求必须是5-15位数字 * 2:0不能开头 * * 分析: * A:键 ...
- [Python]小笔记-queue
queue的作用: 队列最大的作用就是先进先出(First in First Out).队列对于解决最短路的时候特别好用. python 2.7: 要使用队列,那么要加载头文件Queue,也就是imp ...
- [LeetCode]题解(python):012-Integer to Roman
题目来源: https://leetcode.com/problems/integer-to-roman/ 题意分析: 这道题是要把在区间[1-3999]的数字转化成罗马数字. 题目思路: 只要知道了 ...
- [LeetCode]题解(python):020-Valid Parentheses
题目来源: https://leetcode.com/problems/valid-parentheses/ 题意分析: 这道题输入一段只包括括号的字符串,判断这个字符串是否已经配对.配对的规则是,每 ...
- poj 2094 多项式求和。
/** 给出多项式 p(x) = an*x^n + an-1*x^(n-1)..... + a1*x + a0; 给定n,l,k,m 计算 x 从 l到 l+k-1 的p(x)的后m 位的平方的和 用 ...
- C#调用Java方法
C#调用Java方法(详细实例) 阅读目录 C#调用c++ C#调用JAVA方法 C#可以直接引用C++的DLL和转换JAVA写好的程序.最近由于工作原因接触这方面比较多,根据实际需求,我们通过一个具 ...
- Apache的Mod_rewrite学习(RewriteRule重写规则的语法)
URL:http://www.tenwe.com/tech/web/server/200705/content_1548.shtml 今天学习重写规则的语法.RewriteRuleSyntax: Re ...
- Windows Phone 8初学者开发—第12部分:改进视图模型和示例数据
原文 Windows Phone 8初学者开发—第12部分:改进视图模型和示例数据 第12部分:改进视图模型和示例数据 原文地址:http://channel9.msdn.com/Series/Win ...
- Archive for required library: ‘WebContent/WEB-INF/lib/xxx.jar cannot&n
今天导入一个项目到eclipse,出现感叹号,而且报1. Archive for required library: ‘WebContent/WEB-INF/lib/xxxxx.jar cannot ...