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

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

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

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

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

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. [Python] Reuse Code in Multiple Projects with Python Modules

    A module is a function extracted to a file. This allows you to import the function and use it in any ...

  2. crontab FAQ

    1.crontab变量问题 crontab中的脚本须要引入系统变量才干找到,否则crontab中的命令找不到系统变量,或者都写绝对路径. 2.1分钟运行一次 */1 * * * * /etc/keep ...

  3. Python: PS 图像调整--对比度调整

    本文用 Python 实现 PS 里的图像调整–对比度调整.具体的算法原理如下: (1).nRGB = RGB + (RGB - Threshold) * Contrast / 255 公式中,nRG ...

  4. Python datetime time 等时间 日期 之间的计算和相互转化

    from datetime import datetime, date, timedelta, timezone from time import time, ctime, localtime, st ...

  5. POJ——T 1961 Period

    http://poj.org/problem?id=1961 Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 18542   ...

  6. 公告：本博客搬迁到：http://www.courtier.cc

    公告:       您好,本人意见本博客搬迁到:http://www.courtier.cc

  7. [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)

    In certain situations, you care more about the final state of the redux store than you do about the ...

  8. Onsctl 配置ONS服务(10G)

    Onsctl Onsctl这个命令是用来管理ONS(Oracle Notification Service)是OracleClustser实现FAN Event Push模型的基础. 在RAC环境下. ...

  9. [NOIP2013]车站分级 解题报告

    妈蛋这道普及组水(神)题搞了我非常久. 一. 首先一个非常显然的事情就是每一个火车告诉了站与站之间的等级关系,所以拓扑求最长路. 可是发现暴力建边的话最坏能够达到500*500,所以时间复杂度有O(M ...

  10. 10lession-if-else条件语句

    python的条件选择语句跟其他语言的及其相似,这里就不做详细记录,仅仅是看个例子好了 #!/usr/bin/python "]: print('1 in [1,2,3,"4&qu ...