页面出现滚动条时会出现抖动现象

最新推荐文章于 2024-02-20 14:26:23 发布
原创 最新推荐文章于 2024-02-20 14:26:23 发布 · 2.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #HTML #火狐

本文介绍了一种解决页面滚动条出现时产生抖动的方法。通过为html元素设置overflow-y:scroll属性来确保滚动条始终存在，避免因滚动条的突然出现而导致页面布局发生变化。对于仅需解决火狐浏览器中该问题的情况，可以使用特定的样式设置。

页面出现滚动条时会出现抖动现象，就像原本没有滚动条，当点击某个链接时出现滚动条，解决办法如下：

html
{
    overflow-y:scroll;
}

如果只针对火狐，可用

body {

 overflow: -moz-scrollbars-vertical;

}

vue页面抖动/晃动 (已解决)
蓝胖子的博客
03-17 4828
vue页面抖动/晃动 (已解决)
最近做Vue前端项目时遇到的一些问题总结以及解决方案
Wion Wan
09-17 1万+
最近忙碌，但是也要总结一下最近遇到的一些问题，查漏补缺 文章目录遇到的问题：watch的深度监听deep:true 导致了 Maximum call stack size exceeded记录遇到的问题：页面动态扩展，从没有滚动条到出现滚动，导致页面抖动记录：遇到的问题：vertical-align 设置什么情况下才会起作用记录：遇到的问题：vue Webpack打包后的dist 文件夹中新增除...
解决页面切换出现滚动条而导致的抖动问题
The_more_more的博客
12-07 1万+
在页面开发的时候，我们使用路由等方法使页面进行跳转的时候，可能有些页面需要纵向的滚动条，可能有些页面不需要滚动条，由于在浏览器中滚动条也是有默认的样式占据着一点的范围，就会导致切换页面就会有抖动页面的效果，体验十分差通过对body的宽度使用vw来设定，再设置html的样式解决问题 设置好css后切换页面就不会出现抖动了，或者我们也可以采取很绝的方法，直接去修改滚动条的样式 在该代码片段的第四行和第五行修改滚动条的宽度，这样浏览器就不会出现滚动条，页面也不会有抖动了，当然这种方法意味着斩草除根其他零碎的方法就
vue样式问题overflow-y：点击之后页面抖动，y轴出现滚动条
FromNowOnUntilTheEnd
09-27 4080
情景再现 完成了多选框功能，点击查询，表格中无数据显示（数据库中无数据），表格的高度出现了变化，导致Windows下谷歌浏览器页面出现自动适配，y轴就会出现一个滚动条。再次点击多选框，页面y轴就会在出现滚动条<--->滚动条消失之间转换，所以页面就会抖动 注意：在macOS苹果的系统下，不会出现这个问题，除非手动把浏览器页面拉到非常非常小 解决办法 在前端页面，样式顶层，添加这...
解决因出现滚动条导致页面抖动
热门推荐
Rey
08-24 1万+
现在大多数页面都是采用主体内容水平居中布局&lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;/body&gt;div{ width:1200px; margin:0 auto; }但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；如果超出才会出现滚动条。于是，问题来了：信息流页...
ElementUI previewSrcList图片预览滚动条自动上滑至初始位置缺陷修复
码海扬帆：前端探索之旅的博客
02-20 585
ElementUI previewSrcList图片预览滚动条自动上滑至初始位置缺陷修复
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
在网页设计中，水平居中布局是常见的网页布局...通过以上方法，我们可以有效地防止滚动条出现时页面内容的跳动，提高用户体验。在实际项目中，根据页面的具体需求和目标用户群体的浏览器兼容性选择合适的方法进行优化。
firefox 滚动条消失引起页面抖动的问题
09-25
在 Firefox 中，滚动条是内联元素，当它们出现时，会占据一定的空间，这会导致页面的总宽度发生变化。如果页面内容是根据浏览器窗口的宽度来布局的，那么这种宽度的变化就会导致内容的位置发生移动，产生抖动现象。 ...
firefox下有滚动条时页面抖动问题的解决方法
09-25
当网页内容超出单页显示范围时，滚动条通常会自动出现，而如果页面中的某些元素，如tooltip或动态加载的内容，能够临时改变页面高度，就可能导致滚动条时隐时现，从而引发一种名为“页面抖动”的现象。这种抖动会给...
CSS 控制因Html页面高度导致抖动的问题解决方法
09-25
这种抖动通常是因为页面的尺寸和布局在加载时动态调整所导致的，尤其是当页面高度由内容动态决定时，滚动条的出现和消失会直接影响布局，造成页面抖动。为了解决这个问题，我们可以采取一些CSS控制方法来稳定页面的...
滚动条的显示与隐藏导致页面抖动
qq_1016371234的博客
10-09 1292
padding-left: calc(100vw - 100%);
详解elementui之el-image-viewer(图片查看器)
11-30
前言 随着版本的更新Element UI新增了新的组件，例如：Image，没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。 这是官方文档中有写的，但是我想不使用Image组件又想使用预览大图的功能是否可行呢？ 答案是当然可以。 使用方法 翻看了Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default:
用节流处理下拉刷新获取新内容刷新多次的问题
qq_55685361的博客
05-25 600
在写这个项目时我发现在滚动事件中符合滚动条件的情况下，由于触发多次滚动条件会出现刷新多次的情况，我使用了节流的的方式解决了这个问题 防抖具体操作如下（下列步骤，和代码内注释相对应，可以方便查看） 在主体盒子的高度<=页面向下滚动的距离加屏幕高度的情况进行判断是否执行（在满足条件时新增数据） 根据 this.ok(默认为true) 判断是否为1秒内第一次执行，如果为true执行下列代码 将 this.ok 设为 fales,下次再触发scroll事件时判断不通过以此阻止代码多次执行 执行新增数据代码
因滚动条出现而导致页面晃动的解决方案
sinat_23668639的博客
10-29 1万+
这两天因为oa主页为了消除晃动的影响给body下的div加了一个{min-height:960}，可是产品对底部出现的大片空白不满意，而且如果换了超大屏幕这个最小高度还是会出问题，最后去网上百度了这么一个方法，下面的的代码加到CSS文件中就可以了，非常好用。  html{overflow-y:scroll;} overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内
el-image组件点击图片滚动条消失的解决办法
Black_Gin的博客
05-20 2581
el-image组件的slot = error可自定义加载失败内容，这个功能可以保护我们的页面整洁漂亮，个人在项目中也经常使用，不过最近却发现了一个巨坑，极其影响用户体验。 最近测试发现在编辑某个商品信息时，滚动条有时会消失，导致页面整个卡住，无法保存商品信息，只能刷新页面后才能再次滚动，影响可以说是非常恶劣了。经过一番掉头发后，我发现了问题所在。 我们知道，el-image可通过 previewSrcList 开启预览大图的功能，而在预览大图时，element-ui会向body标签添加overflow:h
vue点击图片查看大图的几种方法
得之我幸
09-28 1万+
一.使用插件vue-directive-image-previewer 二.使用elementui组件image的属性--previewSrcList
vue移动端页面在ios浏览器上滑动页面会缩放抖动
qq_2422941992的博客
02-07 867
问题描述：vue项目在ios浏览器上滑动页面会缩放抖动 解决：给html,body添加样式 html,body{ width: 100%; height: 100%; position: fixed;top:0;left:0; }
vue 使用element-ui的el-dialog时 由于滚动条隐藏和出现导致页面抖动问题的解决
m0_48644700的博客
03-16 2351
接手之前老项目 修改为el-scrollbar组件 但是height:100%以及overflow:hidden设置，影响到监听 $(window).scrollTop()值显示回到顶部按钮，并且影响到路由跳转页面跳转时 新页面定位在页面顶部功能，bug更多了，面向百度编程后发现一大神解决方法： 找到”main.js“，入口文件， element ui 已经引入，配置一下，如下值： import ElementUI from ‘element-ui’; ElementUI.Dialog.props.lock
element-ui的table滚动条左右滑动时表头左右抖动错位
最新发布
05-10
### 解决 Element UI 表格滚动时表头抖动和错位问题 Element UI 的表格组件在处理大量数据或复杂布局时可能会遇到表头抖动或错位的问题。这通常是因为浏览器渲染性能不足、CSS 布局不一致或是 JavaScript 控制逻辑不够优化所导致的。 #### 1. **优化 CSS 渲染** 为了防止表头抖动，可以尝试调整表格的样式设置，确保表头和内容区域的高度一致性以及滚动行为流畅性。以下是具体的解决方案： - 设置 `transform` 属性替代传统的 `position: fixed;` 或者 `top: 0;` 来固定表头位置[^1]。 ```css .el-table__header-wrapper { transform: translateZ(0); /* 强制 GPU 加速 */ } ``` - 使用 `will-change` 提前告知浏览器哪些元素会发生变化，从而提升渲染效率。 ```css .el-table__fixed-header-wrapper, .el-table__header-wrapper { will-change: transform; } ``` #### 2. **减少 DOM 节点数量** 过多的 DOM 节点会增加页面重绘和回流的压力，尤其是在大数据量场景下。可以通过虚拟列表技术只渲染可视范围内的行数来降低压力[^1]。 #### 3. **禁用不必要的动画效果** 某些默认动画（如过渡效果）可能导致滚动过程中出现卡顿现象。建议关闭这些动画以提高性能。 ```javascript this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0; // 手动清零 scrollTop 防止跳动 }); ``` #### 4. **改进事件监听机制** 对于滚动事件频繁触发的情况，应考虑节流 (throttle) 技术以减轻 CPU 占用率。例如，在自定义滚动容器中应用防抖函数[^2]: ```javascript function throttle(fn, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall >= delay) { lastCall = now; fn.apply(this, args); } }; } const scrollHandler = throttle(function(event) { console.log('Scrolling...'); }, 16); // 每帧约 16ms 对应 ~60fps document.querySelector('.el-table__body-wrapper').addEventListener('scroll', scrollHandler); ``` #### 5. **升级依赖版本** 确认当前使用的 Element UI 版本是否最新。官方团队持续对已知 bug 进行修复并发布新特性支持更高效的开发模式[^1]。 --- ### 总结 综合以上方法可有效缓解甚至彻底解决 element-ui 表格在滚动过程中的表头抖动与错位问题。优先从 CSS 和 JS 方面入手调优，并视情况引入第三方插件辅助完成特定功能扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值