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

最新推荐文章于 2024-09-14 10:18:08 发布
原创 最新推荐文章于 2024-09-14 10:18:08 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决页面在有无滚动条情况下跳动的问题，提供了两种方法：一是始终保留滚动条区域；二是利用CSS3 calc和vw单位，使页面在出现滚动条时不发生抖动，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

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

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

body{overflow-y: scroll;}

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

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

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

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

 

posted @ 2018-12-26 14:41 青云码上 阅读( ...) 评论( ...) 编辑 收藏
青云码上
关注
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
一、水平居中布局与滚动条跳动的千年难题 当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~ 例如，大淘宝的首页： 然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：     信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。    JS交互，本
CSS3 Calc实现滚动条出现页面不跳动问题
09-24
在处理滚动条出现导致的页面跳动问题时，`calc()`函数能提供一个优雅的解决方案。当页面内容逐渐增加，原本没有的滚动条会出现，这会导致固定宽度居中对齐的布局向左偏移一个滚动条的宽度。为了防止这种偏移，可以...
CSS vw让overflow:auto页面滚动条出现时不跳动
qq_33335751的博客
02-21 903
最开始的需求是出现一个弹出框，弹出框下面部分不会滚动，但是发现一个问题，就是不滚动和可以滚动的区别是滚动条，而滚动条占据了宽度，设置100%就会使内容各种跳，一开始用了各种方法，js用过，但是不好，虽然我是点击事件，但是能用css解决的就不用js。后来用了各种绝对定位盖住滚动条啊，calc盖住滚动条啊，都不完美，总是有新的问题出现，然后就发现了一个大神的空间有一个完美解决此问题的方法，然后试过之后
CSS3 calc实现滚动条出现页面不跳动
huang_xiao_wei的博客
02-23 1410
转自： 链接:http://caibaojian.com/css3-calc-vw.html 来源:http://caibaojian.com当页面内容动态加载，开始没有滚动条，内容增多后出现滚动条，这时使用固定宽度居中对齐布局会向左偏移一个滚动条宽度。解决方法可以给内容全部添加overflow-y:scroll;或者是根据内容用css填充好再补充内容。本文介绍的是calc来计算滚动条宽度，当有
css解决滚动条出现造成页面晃动的问题
haoyanyu_的博客
09-05 5858
窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。 解决方法： 一、简单的做法是  html {       overflow-y: scroll; } 当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容...
CSS 控制因Html页面高度导致抖动的问题解决方法
09-25
这种抖动通常是因为页面的尺寸和布局在加载时动态调整所导致的，尤其是当页面高度由内容动态决定时，滚动条的出现和消失会直接影响布局，造成页面抖动。为了解决这个问题，我们可以采取一些CSS控制方法来稳定页面的...
滚动条造成页面抖动
shiyzhang
09-14 906
最近在做一个项目对于页面 UI 要求十分严格，需要精确到 1px 这就导致了有时候页面可以折叠在折叠与打开之后难免会出现滚动条，这就造成了出现滚动条之后页面会出现抖动这里我先采用的 js+padding-right 实现后面发现 css 有个属性可以直接实现。
css滚动条隐藏/显示,不产生晃动
qq_34169240的博客
09-16 1026
实现效果：内容超出div高度，出现滚动条。鼠标在div上时滚动条显示，鼠标不在div上时滚动条隐藏。 鼠标不在div上时：在右侧为滚动条预留10px宽度。（注：10px是自己设置的滚动条的宽度，若滚动条宽度为8，则改为8px） 鼠标移入div上后：宽度还原100%。但是overflow-y值一定是scroll，不能是auto。因为scroll一直占据一个宽度，而auto是出现滚动条才占据宽度，会出现晃动。 值 描述 测试 visible 不裁剪内容，可能会显示在内容框..
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
滚动条造成页面抖动问题
Start2019
11-11 4603
总结： 若用到 margin:0 auto; 使页面居中，若部分页面出现滚动条，滚动条默认有 20px，怎么造成页面抖动； 解决办法：参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值： 2. padding-left: calc(100vw - 100%); 自动计算滚动条的宽度，并让主体左边距离页面该（滚动条的）宽度。 比如：我...
弹窗阻止页面滚动（纯css）
黄会明的博客
11-25 1542
项目场景： 在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期 看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动 问题描述： 默认样式下，页面滚动条的父元素是html，而fixed的父元素是body 我的解决方法： html { width: 100%; height: 100%; overflow: hidden; } body { width: 100%; height: 100%; overflow: auto; }
使用css动画做无缝滚动时内容抖动问题
weixin_51411364的博客
01-30 1366
使用css动画做无缝滚动时内容抖动问题
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
macleer的博客
07-22 5272
很简单，只要一行代码就搞定了： .wrap-outer { margin-left: calc(100vw - 100%); } 或者： .wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦！！ 首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实
css鼠标移动上去才显示滚动条
qq_33051709的博客
07-05 8935
当鼠标移动上去才显示滚动条，用css就可以完成 .list { /*默认显示滚动条，设置为白色看不出来*/ overflow: scroll; height: 500px; } .list::-webkit-scrollbar { width: 10px; background-color: #fff; } .list:hover ::-webkit-scrollbar-track-piece { /*鼠标移动上去再显示滚动条*/ background
calc(100vh - 10px) calc(100vw - 10px) calc(100% - 10px) 简单说明
热门推荐
Asa的专栏
12-05 3万+
在讲calc之前先说一下 vh  vw：         vw              相对于视口的宽度。视口被均分为100单位的vw      vh        相对于视口的高度。视口被均分为100单位的vh      vmax    相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax      vmin     相对于视口的宽度或高度中较小的那个。其
高性能滚动scroll（防抖和节流）
cc_fys的博客
08-11 1万+
   滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。 var i = 0; window.addEventListener('scroll',function(){     console.log(i++); },false); 在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间...
解决因出现滚动条导致页面抖动
Rey
08-24 1万+
现在大多数页面都是采用主体内容水平居中布局<body> <div></div> </body>div{ width:1200px; margin:0 auto; }但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；如果超出才会出现滚动条。于是，问题来了：信息流页...
页面滚动条导致的页面抖动
听闻青春丶
06-24 441
滚动盒子 { padding-left: calc(100vw - 100%); } 在火狐或者一些浏览器 左侧fix定位需要 left:0 默认会有间隙
在PrimeFaces中关闭对话框时防止页面滚动位置重置
最新发布
04-03
### PrimeFaces 中防止对话框关闭时页面滚动位置重置 在使用 PrimeFaces 的过程中，当对话框（Dialog）被打开并随后关闭时，默认行为可能会导致页面的滚动条位置重新设置到顶部。这种现象通常是因为浏览器刷新了视图状态或者组件触发了某些默认事件。 为了阻止这种情况的发生，可以采用以下方法： #### 方法一：通过 JavaScript 阻止滚动重置 可以通过自定义 JavaScript 来保存和恢复页面的滚动位置。这种方法的核心是在对话框关闭之前记录当前的滚动位置，并在关闭之后将其还原。 以下是实现该功能的代码示例： ```javascript // 保存滚动位置 function saveScrollPosition() { window.scrollYPos = window.pageYOffset; } // 恢复滚动位置 function restoreScrollPosition() { if (window.scrollYPos !== undefined) { window.scrollTo(0, window.scrollYPos); } } ``` 接着，在对话框的 `onShow` 和 `onHide` 属性中调用这些函数[^1]： ```xml <p:dialog widgetVar="myDialog" onShow="saveScrollPosition()" onHide="restoreScrollPosition()"> <!-- 对话框内容 --> </p:dialog> ``` #### 方法二：禁用自动更新视图状态 如果页面中的 `<f:view>` 或其他部分启用了自动更新视图状态的功能，则可能会影响滚动位置的行为。在这种情况下，尝试调整 AJAX 请求配置来避免不必要的视图状态更新。 可以在对话框关闭操作的相关命令按钮上添加属性 `update="@none"`，从而减少对父级容器的影响[^2]: ```xml <p:commandButton value="Close Dialog" actionListener="#{bean.closeAction}" update="@none" onclick="PF('myDialog').hide();"/> ``` #### 方法三：CSS 解决方案 另一种方式是利用 CSS 设置页面主体不可滚动的状态，直到对话框完全隐藏后再恢复正常。这能够有效避免视觉上的跳动效果。 下面是一个简单的例子： ```css body.dialog-open { overflow: hidden !important; /* 禁用滚动 */ } ``` 结合 JavaScript 动态切换类名： ```javascript document.body.classList.add('dialog-open'); // 打开对话框时应用样式 document.body.classList.remove('dialog-open'); // 关闭对话框时移除样式 ``` 最后绑定至对话框生命周期事件中执行上述逻辑即可完成控制[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值