列表懒加载滚动scroll事件不断自动触发问题

懒加载与滚动锚定
最新推荐文章于 2023-10-03 15:48:42 发布
原创 最新推荐文章于 2023-10-03 15:48:42 发布 · 4.9k 阅读 · 11 ·
CC 4.0 BY-SA版权
本文为博主原创文章，转载请务必附上文章网址，谢谢。

在实现列表项懒加载过程中，遇到因浏览器滚动锚定特性导致的自动滚动问题。此特性为防止页面加载时内容高度变化引发滚动条跳动，但与懒加载冲突，形成死循环。解决方法是在父元素添加overflow-anchor:none属性。

问题

近期在开发时应用列表项懒加载时遇到了一个问题，当根据scrollTop来更新显示的列表项时，滚动事件反复触发，导致列表项不停得更新，滚动条自动由顶部滚动到底部。

分析和解决

最后发现，这个问题跟浏览器滚动锚定滚动锚定有关，这个特性是为了避免在页面加载的过程中，页面内容高度发生变化引起滚动条跳动的问题。开启这个特性后，浏览器会自动触发scroll事件，调整滚动条的位置，让滚动条不胡乱跳动。但是懒加载的时候由于不断更新列表项内部的高度，因此就会使浏览器自动触发滚动事件，而滚动事件又触发懒加载的更新，形成死循环，造成自动滚动的问题。在父元素中添加css属性overflow-anchor:none就正常了。

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

在这里插入图片描述

vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
当在Vue组件中使用`@scroll`监听滚动事件时，如果直接在包裹内容的`div`上添加该监听器，如`<div class="body-container" @scroll="scrollEvent">`，可能不会触发`scrollEvent`。这是因为浏览器默认情况下，滚动事件...
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
11-24
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现在网页中滚动到页面底部时自动加载图文列表的效果，类似于图片的懒加载功能。这个功能能够优化用户体验，尤其是在内容丰富的网站上，用户无需手动翻页就能...
Android Recycler Tips 之 smoothScrollToPosition 和 scrollToPosition 触发 ScrollListener
请叫我少爷的博客
04-04 3103
1.在recyclerView中，scrollToPosition 不会触发 scrollListener，而 smoothScrollToPosition 会触发 scrollListener 。源码分析可参考 2.监听 smoothScrollToPosition 滑动动画停止时，的例子： private void scrollToPosition(int position){ recyclerView.removeOnScrollListener(onScrollListener);
scroll事件频繁触发
try again
06-28 5741
写这个标题的时候 我知道我写了一句废话  scroll在用鼠标滚动的时候 触发速度 远超于想象   但是 我们还是要绑定一些事件上去 ，结果频繁触发的时候 给人一种很绝望的感觉    对不对   特别是 懒加载（lazeload）对于懒加载  不清楚的可以去看看 什么是懒加载     onscroll=function（）{     }频繁触发  我们应该控制：
鼠标滚轮事件及解决滚轮事件多次触发问题
Start2019
06-16 5990
1. 滚轮事件的兼容写法；2. 详解滚轮事件参考链接；3. 滚轮事件滚动过快，事件触发两次的两种解决方法
android滑动到筛选位置停止,ios监听页面滚动 $(window).scroll(function(event) {});在滚动停止后才会触发，安卓可以滚动中一直触发...
weixin_32258183的博客
05-27 187
安卓可以用$(window).scroll(function(event) {var winPos = $(document).scrollTop();var nboFt = $('.scroll_box').offset().top;if (winPos >= nboFt){$('.screen_box').addClass('active');} else{$('.screen_box'...
监听ListView列表项点击和滚动事件
liujiaoruiIT的博客
10-05 1307
OnItemClickListener OnScrollListener 手指下拉动态的增加数据源 完整代码 OnItemClickListener:@Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { String text=mList
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
12-11
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
Infinite-Scroll无限滚动加载数据
08-30
这种技术允许用户在滚动页面时自动加载更多内容，而不是一次性加载所有数据，从而改善用户体验，减少页面加载时间，尤其对大数据量的列表或网格尤为重要。 在实现无限滚动时，主要涉及以下几个关键知识点： 1. **...
通过时间戳防止scroll 反复触发
liuhelong12的博客
10-23 1041
//通过ajax 进行 每次数据获取并插入页面的函数 function loadMeinv(page){ $.ajax({ async:false,//设为同步ajax，必须加载完ajax才执行下面的内容 type: "POST", url: "index.php?ctl=photos&act=ajax_m&aid="+GetQueryString("aid"),
监听滚动事件
tour9566的博客
04-28 2302
1.vue组件添加滚动事件： <template> <div class="body-container" @scroll="scrollEvent"> </div> <template> export default { name: 'demo', data () { return { msg...
JavaScript第 11 篇，JavaScript中的scrollTop（JavaScript中的scrollTop，JS滚动到顶部）
热门推荐
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-30 2万+
⭐scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
小程序：scroll-view组件滑动多次触发scroll事件的bug解决
aiqizhi6114的博客
04-03 1112
在项目开发过程中，组件是微信小程序提供给我们的一个分页器，一般滑动到底部时会触发scroll事件，scroll事件中往往包含对后端数据的请求；若是还未滑动到底部时频繁触发事件，则会频繁发请求，达不到想到的分页效果。 先来说说的用法： <scroll-view scroll-y="true" style="height:{containerHeight}px" lower-t...
onscroll事件与onscrollTop
qq_45279180的博客
12-03 2568
onscroll事件以及onscrollTop的使用 因为很久没有用原生js了所以导致很多东西都生疏了，今天一个案例用到了onscroll感觉很实用但是好像之前没怎么了解过(也可能是我忘干净了-.-)所以在这里记录一下 onscroll事件 onscroll 事件在元素滚动条在滚动时触发。 以上是菜鸟教程的定义，刚开始我以为这个事件其实和onmousewheel事件是一会事，后来我发现它们两个其实是不同的。onmousewheel监听的是鼠标事件而onscroll事件监听的是元素滚动的事件，元素的滚动不
scrollTop为什么不会触发
m0_53573698的博客
05-08 291
最简单是,给想要点击元素添加id或者ref属性,获取到该元素,然后通过如下代码使其回到顶部。首先在vue中保证scrollTop触发,需要使其父元素有高度,我的设置100%只需要把id换成自己的元素的id即可。
Vue中如何进行滚动加载与无限滚动
stormjun的博客
10-03 5852
Vue.js提供了强大的工具和技术，使滚动加载和无限滚动的实现变得相对简单。通过示例代码和本文提供的指南，您可以轻松入门并在Vue项目中实现这一令人印象深刻的用户体验功能。希望这篇文章对您有所帮助，如果您有任何问题，请随时向我们提问。
C# WindowForm中ListBox 自动滚动
菜鸟葫芦娃
06-19 6721
C# ListBox 自动滚动代码
scroll滚动事件更新页面可视区数据
qq_27598395的博客
07-16 203
/把可视区前一个数据src页面置空，可视区后一个数据设置值。//懒加载video数据适用app端，保持页面可视区2个video播放的数据。//scrollTop是滚动条滚动时，距离顶部的距离。//scrollHeight是滚动条的总高度。console.log('到底了')console.log('向下');console.log('向上');//videoList 数据。//windowHeight是可视区的高度。//把可视区前一个数据src页面加载数据，可视区后一个数据置空。//滚动条到底部的条件。
使用scrollTo、scrollBy、Scroller实现滚动动画
步行者
11-01 1万+
在上一节讲解了layout、offset、的使用，本节说明scrollTo、scrollBy、Scroller。
jQuery+Ajax实现滚动加载图文列表：模拟图片懒加载
"jQuery+ajax实现滚动到页面底部自动加载图文列表效果" 在网页设计中，用户滚动到页面底部自动加载更多内容的技术被称为无限滚动或滚动加载。这种效果常见于社交媒体、博客和其他内容丰富的网站，提高了用户体验，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值