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

有滚动条页面没有滚动条页面之间相互跳转时,

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

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

方法一: 不管有没有滚动条,都保留滚动条区域

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. wangEditor - 轻量级web富文本编辑器(可带图片上传)

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  2. Git学习总结(5)——搭建Git简易高效服务器

    1. mysysgit+gitblit安装流程 1.1资源  需先下载好的资源(公司用的1.6,1.7+请自行匹配对应的mysysgit+gitblit):  jdk1.6  Git-1.8.4-pr ...

  3. [Python] for.. not in.. Remove Deduplication

    Write a function, remove_duplicates that takes a list as its argument and returns a new list contain ...

  4. PHP 使用Apache 中的ab 測试站点的压力性能

    打开Apacheserver的安装路径(我用的是 WampServer),在bin文件夹中有一个ab.exe的可运行程序,它就是要介绍的压力測试工具. watermark/2/text/aHR0cDo ...

  5. hdu4253 Two Famous Companies --- 二分+MST

    给n个点.m条边的图.每条边要么属于a公司,要么属于b公司.要求一颗最小生成树,条件是当中属于a公司的边数为k. 这题做法非常巧妙. 要求最小生成树,但有一定限制,搜索.贪心显然都不正确. 要是能找到 ...

  6. [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!

    作为入门者来说.了解JavaScript中timer的工作方式是非常重要的.通常它们的表现行为并非那么地直观,而这是由于它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. ...

  7. AVEVA RVM to 3D PDF

    AVEVA RVM to 3D PDF eryar@163.com RvmTranslator 3D PDF plugin can convert PDMS RVM files to 3D PDF w ...

  8. android-从官网下拉源码(ubuntu)

    今天终于成功的从谷歌官网上下载了android 源码.中间折腾了好久,最终总算有所收获 1.下载repo curl https://storage.googleapis.com/git-repo-do ...

  9. 一些优秀的学习网站(Android)

    突然发现自己学习没有总结,从今天开始会持续更新此博文,总结自己的学习情况,也便于自己时常查阅.官方文档就列举了,因为那是必读资料. 一.GitHub部分 1.我的github仓库地址 收藏了我常看的开 ...

  10. Android 学习笔记之Bitmap位图虽触摸点移动

    package xiaosi.bitmap; import android.app.Activity; import android.os.Bundle; public class mianActiv ...