2025年滚动条触底事件（2025年滚动条滚动到底部事件）

解决Lenis平滑滚动无法触底的问题:Webflow动态内容场景下的初始化策略...

1、解决方案概述为解决Lenis平滑滚动在Webflow动态内容场景下无法触底的问题，需优化初始化时机：在Lenis初始化后立即停止，待DOM完全加载后重新启动，确保其基于完整页面高度计算滚动范围。

滚动穿透问题

1、滚动穿透问题解析 什么是滚动穿透？当我们打开一个遮罩层（如模态框modal），并在其上进行滚动操作时，会出现以下两种情况：父级元素内容没有超出容器大小：此时父元素没有滚动条，滚动操作不会引发任何问题，页面表现和谐。父级元素内容超出容器大小：此时父元素有滚动条。

2、通过uniapp框架中的page-meta标签的page-style属性，可以巧妙解决滚动穿透问题。此方法操作简便，只需几行代码即可实现。page-meta标签的page-style属性类似于HTML的body属性，这一点至关重要。

3、移动端开发中，在一个可滚动的页面中打开弹窗时，底部页面理论上是不可滚动的。但是当滑动弹窗时，底部页面会跟着滚动，这就是所谓的页面滚动穿透的问题。那么该如何解决移动端穿透问题呢？常用的解决方案有如下三种：通过阻止弹窗的touchmove默认事件，进而阻止事件冒泡而导致底层页面滚动。

4、首先，若需禁止蒙版下的页面滚动，利用page-meta组件动态修改页面的overflow属性，通过绑定变量show10来控制滚动状态。当show10为true时，底层页面滚动被禁止，解决滚动穿透问题。其次，对于禁止Popup内容区域的滚动穿透，有两种方法。一是通过page-meta组件动态修改其overflow属性，适用于禁止Popup内容区域滚动。

5、方法一：同样利用pagemeta组件，但这次是针对Popup内容区域。通过动态修改Popup内容区域的overflow属性，可以禁止其滚动穿透。方法二：将页面内容包裹在一个标签中，并设置其高度为100vh。这种方法简单有效，无需额外的组件配置，即可避免滚动穿透问题。

6、CSS sticky 定位的生效原理基于其与滚动祖先元素的交互关系，而非仅限于直系父元素。

关于uniapp中onReachBottomDistance属性的使用

1、onReachBottom是uniapp中的一个钩子函数，可以直接使用onReachBottom作为触底函数。它适用于整个页面，局部页面滚动不支持，请勿使用。如果onReachBottom函数不生效，说明没有触底。触底了就一定执行。为了达到预期效果，onReachBottomDistance的值可以适当调大。以上内容基于个人经验，希望能为大家提供一定的参考。也希望大家能够支持自由互联。

2、uni-app在页面的生命周期中提供onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。

3、onReachBottom：页面滚动到底部时触发。可以用于实现上拉加载更多数据的功能。onPageScroll：页面滚动时触发。可以用于实现页面滚动时的逻辑处理，如计算滚动距离等。应用生命周期：onLaunch：应用启动时触发。此时可以进行应用的初始化操作，如获取用户信息、检查版本更新等。onShow：应用显示到屏幕时触发。

4、应用生命周期仅可在App.vue中监听，用于全局管理应用状态：onLaunch 触发时机：uni-app初始化完成时（全局仅一次）。用途：常用于初始化数据、获取设备信息或跳转首页。注意：在此生命周期内使用navigateTo跳转可能导致白屏，需改用reLaunch或延迟跳转。onShow 触发时机：应用启动或从后台进入前台。

5、在onReachBottom函数中，判断status是否为more。如果是，则调用数据请求函数getData（）来加载更多数据。模板部分 在模板部分，需要使用uni-load-more组件，并将status属性绑定到组件的status数据上。通过：status=status将status数据绑定到uni-load-more组件的status属性上。