为什么无限滚动不工作时，我滚动底部，而是触发滚动顶部？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

从 antDesign 来窥探移动端“滚动穿透”行为

引言相信大多数前端开发者在日常工作中都碰过元素滚动时造成的一些非预期行为。这篇文章就和大家来聊聊那些滚动中的非预期行为的出现原理和解决方案。...简单直译过来是说默认情况下，当到达页面的顶部或底部（或其他滚动区域）时，移动浏览器倾向于提供“弹跳”效果甚至页面刷新。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...我们在子元素区域内进行拖拽时，当子元素滚动到底部（顶部）时，仍然继续往下（上）进行拖动。原理上述两种情况相信大家也日常业务开发中碰到过不少次。...而对于目标节点可以滚动时，当滚动到顶部/底部继续进行滚动时，同样会意外触发祖先节点的滚动。

1.8K2 0

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

关于这个组件，有以下几个问题值得思考： 1，当我们说滚动时，涉及到外面的滚动容器与里面的可滚动实体两个对象，我们说滚动到顶部、滚动到底部，指的是什么呢？是什么到顶部，什么到底部了？...2，当滚动事件派发时，滚动到顶部是一个状态，还是一个单一的事件，它会触发多次吗？ 3，scrolltoupper事件、scrolltolower事件是什么时候触发的？...我们一般说「滚动到顶部、滚动到底部」，指的还不是内部滚动实体滚动到了它所能达到的最大值、最小值，而是指滚动实体顶部边缘到达了滚动外框的顶部，及底滚动实体底部边缘到达了滚动外框的底部。...在自定义下拉动画时，容器的slot要标记为refresher，虽然官方文档没有这样写，但如果你不这样做，你的自定义下拉动画是拒绝工作的。...不知道这个问题我讲明白没有，从后端拉取大数据渲染长列表时，现在你明白应该怎么做了吗？关键是明白卡顿并不定是手机真卡了，并不一定是GPU运转不过来了，而是视图渲染不及时。

17.5K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【兼容性】H5滚动穿透解决方案

小东西快快学快快记，大知识按计划学，不拖延滚动穿透相信大家平常开发的时候也经常遇到，网上也有很多解决办法今天我就谈下我对滚动穿透的理解和总结下我们大佬写的一个比较完美的解决方案不废话，本文分为...3部分 1、什么是滚动穿透 2、为什么会滚动穿透 3、怎么解决滚动穿透 4、碰到的问题什么是滚动穿透大家肯定不陌生了，做移动端开发的，肯定都碰到过，比如我明明滚动的是弹窗，但是底下的 document...却在滚动不说这么多，直接看为什么会滚动穿透首先，这不是一个bug，这是一个合理且正常的表现阅读了官方的文档之后，我也是理解了好久 https://www.w3.org/TR/cssom-view...，再滚动，仍然会触发document 滚动为什么呢？...（毕竟只要元素能滚就能发生穿透）但是document 还是不会滚动的 3滚动穿透的触发条件一次没有抬起的滚动行为（手没有离开屏幕）导致元素滚动到顶部或者底部之后，如果手还在屏幕上往两端滑，并不会触发滚动穿透

7.2K2 0

滚动穿透的6种解决方案【已自测】

关键代码： ps：我偷懒直接js控制了行间样式，但标准写法应该是给body添加类名来控制局限问题： body滚动后再触发弹层，会使body页面回滚到顶部。...真正的问题是当我们滑动弹窗可滚动区域，把可滚动区域的内容上滑到底部或下拉到顶部后，再触发弹窗可滚动区域准备滑动，此时的背景页面就会跟随滚动。真是恐怖。...因此还需要我们对弹层的可滚动区域的滑动事件做监听：第一种情况，若向上滑动时，到达底部；或者第二种情况，若向下滑动时，已到顶部。这两种情况任意一种发生时，就阻止滑动事件。...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...代码： 1、事先准备一个工具： 2、获取页面的滚动距离： 3、弹层出现/消失的主流程局限问题：这个方法我在真机上测试时发现一个问题，是IOS的：大家应该都知道IOS的页面顶部继续下拉或者底部继续上拉

14.7K3 1

医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, , [option

为什么呢？因为我们在事件和函数执行之间加了一个控制层。记住，我们是无法控制 DOM 事件触发频率的。看下滚动事件的例子：当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发30次事件。...经我的测试，在智能手机上，慢慢滚动一下，一秒可以触发事件100次之多。这么高的执行频率，你的滚动回调函数压力大吗？...电梯并没有改变楼层，而是再次打开梯门。电梯延迟了改变楼层的功能，但是优化了资源。在顶部按钮上点击或移动鼠标试一下：你可以看到连续快速的事件是如何被一个 debounce 事件替代的。...节流阀实例无限滚动用户向下滚动无限滚动页面，需要检查滚动位置距底部多远，如果邻近底部了，我们可以发 AJAX 请求获取更多的数据插入到页面中。...我们心爱的 _.debounce 就不适用了，只有当用户停止滚动的时候它才会触发。只要用户滚动至邻近底部时，我们就想获取内容。使用 _.throttle 可以保证我们不断检查距离底部有多远。

3.1K2 0

造一个 react-infinite-scroller 轮子

offset 公式无限滚动的原理很简单：只要很长元素总高度 - 窗口距离顶部高度 - 窗口高度底部。...isReverse 除了向下无限滚动，我们还要考虑无限向上滚动的情况。有人就会问了：一般都是无限向下的呀，哪来的无限向上？很简单，翻找微信的聊天记录不就是无限向上滚动的嘛。...，滚动条的位置不应该还停留在 scrollY = 0 的位置，不然会一直加载更多，比如此时滚动到了顶部： 3 顶部了，开始加载 2 1 0 加载更多后 6 触发无限滚动...mousewheel 事件在 Stackoverflow 这个帖子中说到：Chrome 下做无限滚动时可能存在加载时间变得超长的问题。...还有一点，在添加 listener 的时候可以触发一次 listener 作为 initialLoad 向上滚动的时候，在 componentDidUpdate 里要把滚动条设置为上一次停留的地方，否则滚动条会一直在顶部

3.1K3 0

vue上拉加载更多组件

我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。...上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。...Props： props: ['up', 'bottomDistance'], up对应的就是父组件传递的到达底部是触发的方法，'bottomDistance'是可以设置到达底部距离多少的时候触发加载更多的方法...其实设置了这个移动到顶部也不需要，这边为了稳定就加上了。还有就是要移除监听滚动，我试了，跟定时间计时器一样，没有在组件销毁的时候移除，会一直存在。...要说的是，这边没有写加载更多的动画效果，使用的时候可以自定义一个然后隐藏，在触发加载更多的时候显示，加载完之后隐藏，包括已经到底部，都可以自定义。

2.7K1 0

一个简洁、有趣的无限下拉方案

一些应用场景页面滚动时的懒加载实现。无限下拉（本文的实现）。监测某些广告元素的曝光情况来做相关数据统计。...监测用户的滚动行为是否到达了目标位置来实现一些交互逻辑（比如视频元素滚动到隐藏位置时暂停播放）。...，异步监听，尽可能得减少 DOM 操作，触发回调，然后去获取新的数据来更新页面元素，并且用调整容器 padding 来替代了本该越来越多的 DOM 元素，最终实现列表滚动、无限下拉。...这就像是一个循环队列一样，随着滚动的进行，顶部元素先出视窗，但又将移动到末尾，从而实现无限下拉。...而 Intersection Observer 其实抽离了所有滚动层面的相关逻辑，你不再需要对滚动距离等相应 DOM 属性进行获取，也不再需要进行一系列滚动距离相关的复杂计算，并且同步的滚动事件触发变成异步的

2.3K2 0

鸿蒙开发实战案例：Scroll容器嵌套多种组件事件处理案例

页面向下滚动直到页面底部，无卡顿现象。从页面底部向上滚动直到页面顶部，无卡顿现象。实现思路概述：使用Scroll嵌套Web和List组件实现。...3) 如果Scroll滚动到底部，则滚动偏移量派发给List，Scroll自身不滚动。...二、手指向下划动(页面上滑)：1) 如果List没有滚动到顶部，则Scroll将滚动偏移量派发给List，Scroll自身不滚动。...3) 如果Scroll滚动到顶部，则滚动偏移量派发给Web，Scroll自身不滚动。...list组件滚动能无缝衔接，像同一个滚动组件滚动效果Scroll(){ // ...}// TODO：知识点：通过调用Scroll.onScrollFrameBegin()，在每帧开始滚动时触发时将Scroll

1.1K2 0

大家都能看得懂的源码之ahooks useInfiniteScroll

简介 useInfiniteScroll 封装了常见的无限滚动逻辑。详细可看官网[3] 注意：这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动，虚拟滚动后面会讲到。...: Service, options: InfiniteScrollOptions = {}, ) => { const { // 父级容器，如果存在，则在滚动到底部时...manual, // service 执行前触发 onBefore, // 执行后 onSuccess, // service reject 时触发 onError...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。...一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。

1.1K3 0

鸿蒙开发：使用nestedScroll解决滑动冲突

@Entry@Componentstruct Index { build() { Scroll() { Column() { Text("我是顶部的组件")...SELF_FIRST自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。...PARENT_FIRST父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。...比如，还是以上的案例，我们在List组件下面再增加一个底部的组件，我们运行看下效果：显然之前配置的nestedScroll属性只满足了顶部的组件，而底部的组件在滑动的过程中明显有滑动冲突，并没有达到我们的预期...顶部组件和底部组件那么就无法显示，再比如如果加载的不是List组件，而是一个Grid组件或者其他的滚动组件呢？显然处理上有很大的问题。这个作业留给友友们，你们知道如何解决吗？

4871 0

uni-app中使用scroll-view滚到底部时多次触发scrolltolower

Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower...false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向微信小程序 show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+...@scrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件 @scrolltolower EventHandle 滚动到底部/右边，会触发...第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件，第二个问题是当页面由第一个scroll-view（该页面已经到了的最底部了）切换到第二个scroll-view时会自动滚动到页面的最底部...为0，那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部，从而解决了默认滚动到最底部加载多次数据的问题。

11.8K1 1

实现滚动时Header自动隐藏

这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。...、滚动状态（到顶部/到底部）和是否在滚动其中，函数返回的 directions 是一个 reactive 对象，我们对其进行监听，当该变量发生变化时，说明滚动方向发生了改变。...，这是为了避免iOS设备中safari浏览器橡皮筋效果导致的误判所以为什么 safari 橡皮筋效果也会触发scroll事件啊啊啊啊啊！！！...甚至y值能到负值查看示例这里还有一个问题，只检测了滚动到顶部，而没有检测滚动到底部。这是因为我没想到什么很好的方法去检测。...前者，可以通过判断y值是否为0（或小于0）来实现；而后者，正常来说，滚动到底部时，文档高度-视窗高度应该和滚动条的y值是一致的。

3.6K3 0

小程序开发基础-scroll-view 可滚动视图区域

scroll-y 表示允许纵向滚动 upper-threshold 表示距顶部或者左边多远时（单位为px），触发scrolltoupper事件 lower-threshold 表示距底部或者右边多远时时...（id不能以数字开头），设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation 表示在设置滚动条位置时使用动画过渡 bindscrolltoupper 表示滚动到顶部或左边...，会触发scrolltoupper事件 bindscrolltolower 表示滚动到底部或右边，会触发scrolltolower事件 bindscroll 表示滚动时触发 enable-back-to-top...表示iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 class="scroll-view-item bc_green"中，在wxss样式定义，高度为200px，如果没有就不会出现...，lower为滚动条滚到底部的时候触发，scroll为滚动条滚动后触发，tap为点击按钮切换到下一个view，tapMove为通过设置滚动条位置实现画面滚动。

3.3K4 0

详细设计一个文章页目录插件

随着页面的滚动，目录将从头滚到尾，那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止；当页面在最顶部的时候，当前高亮的子目录肯定是第一个，随着页面的向下滚动，高亮的位置也在不断下移...滚动高度 = n个目录子项 * 子项的实际高度先说子项的实际高度，对于目录子项的样式上，我这里没有用内间距和外边距，而是通过 line-height 来控制他们之间的间隙，那么：子项的实际高度 =...很多文章页很长，所以有回到顶部这种功能，试想一下，如果当前页面已经滚动到最底部，这个时候来一下回到顶部，那刚刚写的优化代码会遍历几次？答案是：遍历次数将会是目录子项的总数。...，即中位线以下，此时目录的滚动距离将是滚动后高亮子目录的底部位置到中位线的高度差，如上图 ②；滚动后的高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部，此时目录的滚动距离将是滚动列表底部到滚动区域底部的高度差...用 JS 实现动画效果，一定离不开定时器，诸如 setTimeout、setInterval 之类，但是这次我不打算用他们，而是用 HTML5 中增加的 requestAnimationFrame，这是一个专门为浏览器实现动画而提供的

2.7K2 0

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

具体需求如下：点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。...中间：滚动条距离页面顶部 960 ～ 1920px（包含 960，不包含 1920）的范围。底部：滚动条距离页面顶部大于等于 1920px 的范围。...当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。...页面显示顶部、中间和底部区域，以及右侧的侧边栏。 2. 点击链接：用户点击侧边栏上的链接，触发 onclick 事件，调用 toFunction 函数。...toFunction 函数将页面滚动到指定的高度。 3. 页面滚动：当用户滚动页面时，触发 $(window).scroll 事件。

1.5K0 0

一个快速的 Vue3 无限滚动组件

为什么还要使用无限滚动组件？我们都见过使用无限滚动来显示其内容的网站的示例，但是什么时候使用它，它的效果会比使用典型的分页系统更好呢？...你可以阅读我之前分享的一篇文章《无限滚动与分页哪个用户体验更好？如何正确使用它们》，在这里，我只简单的总结一下它们的有缺点。...那么，现在让我们继续进行激动人心的部分：无限滚动！ 4. Vue3 无限滚动现在我们已经完成了所有设置，当用户向下滚动到内容底部时，我们可以开始加载更多数据。...以下代码通过检查我们内容的底部是否在屏幕上可见来工作。如果是，我们调用我们的方法来加载更多内容！...当我们向下滚动到当前内容的底部时，应该会自动加载新内容。让我们看看我们有什么。无限滚动组件的可能扩展这只是创建Vue3无限滚动组件的介绍。有很多不同的方向可以改进它。

3K2 0

《网页滚动的“隐形指挥官”：overscroll - behavior属性全解析》

比如，当页面中存在多层嵌套的滚动区域时，用户在滚动一个子元素到边界时，往往会不经意间触发父元素的滚动，这种“滚动链”现象不仅打断了用户原本流畅的操作节奏，还可能导致页面出现意想不到的抖动与错乱，破坏了整体的用户体验...再如，在移动端，当用户快速滚动到页面的顶部或底部时，常见的“弹性”效果或下拉刷新操作，有时并非是用户真正想要的，反而成为了干扰因素，分散了用户对核心内容的注意力。...例如，在一个简单的新闻列表页面中，使用auto值，用户在快速滑动列表时，能够清晰地感受到列表顶部和底部的弹性反馈，仿佛与页面建立了一种默契的互动，这种熟悉的操作体验也符合大多数用户的使用习惯，让他们在浏览过程中感到轻松自在...如果希望用户在滚动侧边栏菜单时，不会意外地触发主内容区的滚动，从而保持页面结构的稳定与操作的独立性，contain属性就派上了用场。...当我们精确控制滚动行为，避免不必要的滚动链传播和默认行为的触发时，可以减少浏览器在处理滚动事件时的计算量，从而提升网页的性能和响应速度。

3350 0

前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

实际在开发中，瀑布流离不开的一个情况就是海量数据，那么应对海量数据最好的设计模式是加入懒加载和无限滚动，但是做无限滚动还要同时做好页面的优化（即DOM的产生、销毁与复现策略），否则在滚动的过程中页面DOM...三、基于DeepSeek实现无限滚动+懒加载+瀑布流模块1、无限滚动+懒加载+瀑布流模块的底层逻辑在正式提问之前，我们要先做好顶层设计。请注意：AI工具只能当做顾问，不能当做专家。...那肯定是某一列上一个元素尾部到达某个界限的时候，这个界限可以是视口的最底部，也可以是视口底部再往下一个固定数值（比如视口底部往下1000px，这样是为了提前加载图片内容优化用户体验）②无限滚动带来的内存泄漏问题...我们可以记录一个位置，比如视口上方1000px，当元素的顶部随着滚动到达视口上方1000px位置的时候，就记录该元素的元数据信息，然后销毁该DOM。...top) { // 元素离开视口顶部时记录位置并销毁 recordPosition(id) visibleItems.value.delete(id)

1.3K2 1

「大众点评点餐」小程序开发经验 03：事件联动

滚动下方右侧菜品分类详情时，当该分类详情模块顶部接触到滚动区域的顶部，左侧对应的导航菜单栏高亮。...顶部黄条提示文案模块吸顶，底部购物车模块吸底。需要适配各种不同机型。...我们实践时发现，使用 scroll-view 可以不指定高度，页面有滚动区存在。但这么做，滚动时无法触发 scroll 事件，也就无法完成联动设计。...我们需要做的，就是计算出每个分类小灰条距离文档顶部的高度 scrollHeight，并在每次滚动事件触发时，比较当前滚动的高度与分类小灰条的滚动高度 scrollHeight。...在上面讲解 scroll-view 属性时，我提到过一句话：设置 scroll-into-view 引起的滚动操作，同样会触发 scroll 事件。

3.6K4 0

点击加载更多

从 antDesign 来窥探移动端“滚动穿透”行为

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

【兼容性】H5滚动穿透解决方案

滚动穿透的6种解决方案【已自测】

医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, , [option

造一个 react-infinite-scroller 轮子

vue上拉加载更多组件

一个简洁、有趣的无限下拉方案

鸿蒙开发实战案例：Scroll容器嵌套多种组件事件处理案例

大家都能看得懂的源码之ahooks useInfiniteScroll

鸿蒙开发：使用nestedScroll解决滑动冲突

uni-app中使用scroll-view滚到底部时多次触发scrolltolower

实现滚动时Header自动隐藏

小程序开发基础-scroll-view 可滚动视图区域

详细设计一个文章页目录插件

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

一个快速的 Vue3 无限滚动组件

《网页滚动的“隐形指挥官”：overscroll - behavior属性全解析》

前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

「大众点评点餐」小程序开发经验 03：事件联动

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐