大家写页面时应该都遇到过一个问题，尤其是写单页面应用的时候，

在有滚动条页面和没有滚动条页面之间相互跳转时，

你页面的主体内容会向左或者向右抖一下，让强迫症看了很不舒服。

现在就来解救一下强迫症：

方法一： 不管有没有滚动条，都保留滚动条区域

body{overflow-y: scroll;}

方法二：CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动(兼容IE9+以及其他现代浏览器)

你希望不抖动的元素{padding-left: calc(100vw - 100%);}

方法二最好别给body加padding-left: calc(100vw - 100%);因为有滚动条时，页面最左边也会出现空白；

所以最好单独给页面的主要元素加padding-left: calc(100vw - 100%);

css页面滚动条出现时防止页面跳动的方法的更多相关文章

  1. CSS设计之页面滚动条出现时防止页面跳动的方法

    一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,大淘宝的首页: 然而,这种布局有一个存在一个影 ...

  2. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  3. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  4. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  5. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...

  6. 让overflow:auto页面滚动条出现时不跳动

    今天看到一篇张鑫旭的文章,转载过来.https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-j ...

  7. height为auto, 滚动条出现时, 使页面不跳动

    <style> html { margin-left: calc(100vw - 100%); } </style> ;

  8. 【转】用CSS代码写出的各种形状图形的方法

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square {width: 100px;height: 100px;background: ...

  9. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

随机推荐

  1. C/C++获取本地时间常见方法

    跨平台方法 方法一:手动暴力法 #include <iostream> using namespace std; #include <time.h> time_t t = ti ...

  2. Stacked Autoencoders

    转自:http://www.cnblogs.com/tornadomeet/archive/2013/03/25/2980357.html 如果使用多层神经网络的话,那么将可以得到对输入更复杂的函数表 ...

  3. tomcat日志配置之一自带log

    问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...

  4. cocos2dx——lua自己主动和手动绑定

    [自己主动绑定] 參考:http://my.oschina.net/skyhacker2/blog/298397 主要是通过引擎自带的tools/tolua,主要过程例如以下: 1.编写好要导出的c+ ...

  5. iOS - 系统经常使用框架(framework)的简介

    系统框架(framework)的简介 ImageIO  - 该框架的接口可用于导入或导出图像数据及图像元数据 CoreTelephony  - 获取IMSI号,SIM卡背面的号码是SIM卡的电子串号, ...

  6. unity3d编程日志

    2014/4/27 编写脚本的时候,加入了中文凝视,发现console面板有非常多不可思议的bug.查了一下发现是由于monodevelop脚本中文凝视报错,而英文凝视不会受影响. 解决方法:把凝视放 ...

  7. 雅黑PHP探针 For PHP7

    雅黑PHP探针 For PHP7资料来源: https://kn007.net/topics/yahei-php-probe-for-php7/在v0.4.7版本的基础上,修正了废弃函数及错误语法.使 ...

  8. android-EditText 更改外边框无效

    修改的代码如下 <com.android.mms.ui.EnhanceEditText android:textColor="#000000" <!--问题处在这里,a ...

  9. Day3下午解题报告

    预计分数:20+40+30=90 实际分数:40+90+60=190 再次人品爆发&&手感爆发&&智商爆发 谁能告诉我为什么T1数据这么水.. 谁能告诉我为什么T2数据 ...

  10. VB 宏+mysql解决EXCEL表格实现自动化处理

    1.表格模板自动建立源码 Sub opp()Dim myPath$, myFile$, AK As WorkbookApplication.ScreenUpdating = FalsemyPath = ...