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

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

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

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

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

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++ lambda表达式 （一）

    为什么要lambda函数 匿名函数是许多编程语言都支持的概念,有函数体,没有函数名.1958年,lisp首先采用匿名函数,匿名函数最常用的是作为回调函数的值.正因为有这样的需求,c++引入了lambd ...

  2. 03012_预处理对象executeQuery方法（实现数据库的查询）

    1.概述 (1)通过预处理对象的executeQuery方法,完成记录的select语句的执行: (2)操作格式统一如下: ①注册驱动: ②获取连接: ③获取预处理对象: ④SQL语句占位符设置实际参 ...

  3. 【Uva 10817】Headmaster's Headache

    [Link]: [Description] 一个学校,有s门课程(1<=s <=8),里面本身已经有m个老师了,然后还想招聘n个老师: 给出这m个老师和n个来应聘的老师的信息; (c[i] ...

  4. PHP和js判断访问终端是否是微信浏览器

    http://www.sucaihuo.com/php/813.html http://www.thinkphp.cn/extend/767.html http://blog.csdn.net/gf7 ...

  5. HDU——T 1506 Largest Rectangle in a Histogram|| POJ——T 2559 Largest Rectangle in a Histogram

    http://acm.hdu.edu.cn/showproblem.php?pid=1506  || http://poj.org/problem?id=2559 Time Limit: 2000/1 ...

  6. boost::asio与ACE的对比

    http://blog.163.com/miky_sun/blog/static/3369405201041753652505/

  7. Android插件化（二）：使用DexClassLoader动态载入assets中的apk

    Android插件化(二):使用DexClassLoader动态载入assets中的apk 简单介绍 上一篇博客讲到.我们能够使用MultiDex.java载入离线的apk文件.须要注意的是,apk中 ...

  8. jquery2.0.3 全部源码

    /*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...

  9. colorscheme-如何vim颜色风格

    我们vim默认的风格是黑底的,如果我们想要更换其他的风格,比如字体高亮的颜色.注释的颜色等.这时候我们就需要一个属性了,如下 colorscheme darkblue 这个属性的值,其实是在 /usr ...

  10. Spring--之旅

    spring的地位 如图可以看出,sping纵跨整个项目架构,它是一个容器框架.下面使用一个简单的项目来认识spring. 快速入门 step 1.新建一个普通Java工程,spring只是一种容器, ...