css页面滚动条出现时防止页面跳动的方法

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

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

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

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

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

body{overflow-y: scroll;}  

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

body{margin-left: calc(100vw - 100%);}

想用那种自己挑一个呗,嘿嘿嘿

原文地址:https://www.cnblogs.com/djjlovedjj/p/10179053.html

时间: 2024-11-09 19:39:04

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

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

一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加载,此时页面高度有限,没有滚动条:然后,更多内容显示,滚动条出现,占据

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

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p

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

一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square {width: 100px;height: 100px;background: red;} 2.长方形 #rectangle {width: 200px;height: 100px;background: red;} 3.左上三角 #triangle-topleft {width: 0;height: 0;border-top: 100px solid red; border

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

在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图: 接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:  动态超链接 <span style="font-size:18px;"><span style="

JS弹出层遮罩,隐藏背景页面滚动条细节优化

做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器. 各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器.这些浏览器加起来占有超过半数的桌面浏览器市场份额.对于

页面出现滚动条时,居中的元素不会跳动的方法

我们经常会遇到这样的情况:在一个页面加载的开始,页面高度比较低,不会出现滚动条.而随着页面的加载,滚动条出现,页面中居中的标题,图片或者一些其他的东西会突然往左边跳一下. 这是因为,刚开始没有出现滚动条时,你用margin:0 auto;所做的居中是根据浏览器窗口大小而计算的居中.在出现滚动条时,用margin:0 auto;所做的居中是根据浏览器窗口大小减去滚动条的宽度而计算的居中.这样就会出现跳动的问题. 解决方法我是从一个博客的评论上学到的,看到这个解决办法,才发现自己学的东西有多浅显,惭

Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位是15px);(通过在modal显示时给body添加.modal-open类实现) 设置modal -- overflow:auto;overflow-y:scroll; 这样设置的效果是: (1)当页面内容超出(即页面本身存在滚动条),则moda弹出后,原bo

解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位是15px);(通过在modal显示时给body添加.modal-open类实现) 设置modal -- overflow:auto;overflow-y:scroll; 这样设置的效果是: (1)当页面内容超出(即页面本身存在滚动条),则moda弹出后,原bo