简单直译过来是说默认情况下，当到达页面的顶部或底部（或其他滚动区域）时，移动浏览器倾向于提供“弹跳”效果甚至页面刷新。...您可能还注意到，当滚动内容页面顶部有一个包含滚动内容的对话框时，一旦到达对话框的滚动边界，底层页面就会开始滚动 - 这称为滚动链接。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。 还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...getScrollParent 寻找区域内可滚动祖先元素 // canUseDom 方法是对于是否可以使用 Dom 情况下的判断,主要为了甄别（ Server Side Render ） import...，表示还未滚动 // 滚动条在顶部时，需要判断是当前元素不可以滚动还是可以滚动但是未进行任何滚动 // 当 offsetHeight >= scrollHeight 表示当前元素不可滚动
2.3 注意 1、在可滚动的容器上设置了 scroll-behavior: smooth 之后，其优先级是高于 JS 方法的。...2、在可滚动的容器上设置了 scroll-behavior: smooth 之后，还能够影响到浏览器 Ctrl+F 的表现，使其也呈现平滑滚动的效果。...根据上面提到的我们可以用很多种方式去实现，假设我们已经为列表容器增加了 scroll-behavior: smooth 的样式，然后在 useEffect hook 中去调用滚动方法： import React...3.3 scrollIntoView 的奇怪现象 3.3.1 页面整体偏移 最近在过一些历史用例的时候，遇到了这种情况： 现象大概就是，当我通过按钮，滚动定位到聊天区域的某条消息时，页面整体发生了偏移...关键在于 block: "start"，从上面的参数说明我们了解到，默认不传参数的情况下，取的是 block: start，它表示 “元素顶端与所在滚动区的可视区域顶端对齐”。
scroll-behavior 原先这个主题在文章下方的作者是有一个分享文章到 facebook 和 twitter 的。在转移主题到 Hexo 的时候也就顺便复刻了下来。...一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。...很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。 但实际上CSS的 scroll-behavior 可以解决这个问题。...scrollbar-gutter 浏览器的滚动条是有宽度的，而且会占用页面的空间导致页面抖动。...:root{ scrollbar-gutter:stable; } 这个 CSS 是固定留一个空间让滚动条使用，这样有没有滚动条页面都是一个宽度，也就不会造成页面抖动。
目录 前言 实现逻辑 代码 样式 前言 我们在上网的时候经常会看到一些优秀的博客顶部有个进度条，这个进度条有助于读者衡量阅读进度，我认为这个功能可以带来良好的用户体验，所以，应该将其添加到我个人博客上的文章中...实现逻辑 获取页面可以滚动的高度. 获取页面已经滚动的高度....阅读进度=已经滚动的高度/页面可以滚动的高度 代码 单独定义一个 react hook 来活动当前的阅读进度 import { useEffect, useState } from 'react' export...('scroll', updateScroll) } }, []) return progress } 剩下的工作是将进度显示在页面上，为此，我在顶部的导航栏上显示一个进度条。...进度为 0 向左偏移 100% ，进度为 100 偏移 0，所以使用 translateX(${progress - 100}%) 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得
项目地址 在这里，如果有好的意见欢迎提 issue或pr。 开始 我们先来看下，腾讯课堂视频播放详情页面是怎么样的？ ?...- 80}}，那这样滚动距离到120时，滚动条到底部了，视频播发控件的区域距离屏幕顶部还有80。...发现第一种方法在解决如何寻找子控件并判断滚动状态上没有方法（可能是我没发现）以及性能上的考量，那就采用第二种方法。 分析 为了解决上面的问题，我们需要了解几个关键点。...一个是怎么判断手势滑动以及外层滚动容器到底部和内层滚动到顶部？ 第二个是寻找滚动组件并通知内层滚动组件开始滚动？...具体可以参考我以前写的事件分发机制学习。 回过头来讲外层滚动容器通知内层滚动，其实通知滚动相当于不拦截事件，那么就是重写 onInterceptTouchEvent方法并返回false。
两个方向的滚动可以同时开启，但在操作时，只能同时朝一个方向滚动。 scroll-top指内部的滚动实体，高于顶部边缘多少距离。单位默认是px，也可以传入rpx。...我们一般说「滚动到顶部、滚动到底部」，指的还不是内部滚动实体滚动到了它所能达到的最大值、最小值，而是指滚动实体顶部边缘到达了滚动外框的顶部，及底滚动实体底部边缘到达了滚动外框的底部。...要么使用页面实例的requestAnimationFrame方法模拟一个定时器，要么在JS中实现。 我选择了后者，这个方案看起来更简单。...updateList、updatePage是setData更新时用的key，因为是变量，所以在使用时要用[]括起来。 作者为什么不直接使用push方法呢？...在顶部自定义一个navigatorBar导航栏，单击一个按钮切换到一个页面，每个页面都是一个独立的scroll-view组件。
前言 锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现锚点定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡锚点的解决方案 服务端渲染下的实现方案...behavior:'smooth'可以启用平滑滚动效果。 锚点定位和目录联动 很多时候,我们会在页面中实现一个目录导航,可以快速定位到各个章节。...此时就需要实现锚点定位和目录的联动效果: 点击目录时,自动滚动到对应的章节 滚动页面时,自动高亮正在浏览的章节 目录导航组件 目录导航本身是一个静态组件,我们通过props传入章节数据: function...问题解析 遮挡问题 有时锚点会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。...在滚动方法中加入offset // scroll offset const scrollOffset = -80; chapterEl.scrollIntoView({ offsetTop: scrollOffset
渲染 50 个 Node，实际只渲染了可见部分的 Node 本篇文章不讨论如何实现一个虚拟列表，此类文章网上有很多。但是有关于回退页面无法回到虚拟列表上一次的位置的文章却很少。...)滚动，即使开启了 Restoration，回退页面后仍然无法回到上一次的位置。...一个不好的解决方案是用提供的接口在每次滚动后记录一个 Range，Range 是一个当前渲染内容的索引，在之后的渲染后可以用自身的 scrollTo 方法跳转。...这样有个坏处是会出现跳动，原先在顶部直接跳动到了原先的位置，还是个预估值。既不准确也不符合 UX 逻辑。...之后，我又找到一个比较小众的库， virtual-scroller ，不仅仅可以在 React 使用，他独立封装了一个 Core，可以单独在各个框架中使用，即使在 VanillaJS 中使用，小众的库功能肯定不会很多
那么防抖，就是我们滚动页面，刚要获取导航栏离文档顶部的距离，但是发现等会还要继续滚动，那么就先不获取了，等什么时候停止滚动了，再获取这个距离。...因为滚动事件是频繁触发的，紧接着又触发了 scroll 事件。...这就是防抖的效果，现在你有没有对防抖有一个很深的印象了呢？ 接下来我们来介绍一下第二种处理频繁触发事件的方法： 节流。 三、节流 （1）定义 为了介绍节流的定义，我们继续使用跑步这一例子。...想象我们在跑步，我们很热很热，在跑步的过程中，每隔几秒钟，拿毛巾擦一擦身上的汗。这里我们同样把 ’ 跑步 ’ 看作是 滚动页面的操作， 把 ’ 擦汗 ’ 看作是获取导航栏离文档顶部的距离的操作。...那么，节流就是， 我们滚动页面，获取了一下导航栏离文档顶部的距离， 此时我们一直在滚动页面， 只不过我们刚获取过距离了，就先不获取了， 等距离上一次获取几秒后，我们再获取一次吧。
若左侧高亮的导航菜单不在可视区域： 当高亮的导航菜单顶部在左侧 scroll-view 滚动区上方（被遮住了），则将该高亮导航菜单滚动至将高亮导航栏的顶部与左侧可滚动区域顶部重合（高亮菜单为滚动区的第一个分类...微信官方文档介绍，使用 scroll-view 组件，必须指定高度。 我们实践时发现，使用 scroll-view 可以不指定高度，页面有滚动区存在。...但我们发现，右侧 scroll-view 不会因此滚动到指定的高度。 我们猜想，可能是因为获取到的 dataset.id 是一个数字类型字符串，其内部使用 === 方式导致不匹配。...另外需要注意的是，设置 scroll-into-view 引起的滚动操作，同样会触发 scroll 事件。 右侧栏滚动事件与分类栏自动滚动 滑动右侧、让左侧滚动，是整个页面设计最核心的部分。...想一想，这是什么原因导致的？ 在上面讲解 scroll-view 属性时，我提到过一句话： 设置 scroll-into-view 引起的滚动操作，同样会触发 scroll 事件。
当然，这些组件最终会被抽离到 puicom group 下。 再往上，是容器层。容器提供一些可插拔的 hooks 能力。...并且根据 component 的配置来渲染不同的组件到页面中，首屏组件和按需加载组件。最后，支撑到每一个对应的页面里面。 分工组织 ?...对于一个页面，无论是 react 还是 rax，其实都是 fn(x)=>UI 的过程。所以整理流程无非就是拿到接口属于渲染到 UI 中。所以对于中间页的架构而言也是如此。...所以对于容器的底层，之前使用的 RecycleView ：固定 div 高度，基于 overflow 来实现滚动的。 虽然，在 h5 里面这种滚动机制有些”难受“，但是罪不至”换“。...但是尴尬至于在于，iOS 的橡皮筋想过，在页面滚动到顶部以后，如果页面有频繁的动画或者 setState 的时候，会导致页面重绘，重新回到顶部。
10 至于返回顶部按钮，因为是要固定在页面底部的，所以可以不放在scroll-view组件中，这里我放进去了。...43 44 不过经过我后来的测试，把绝对定位这一套代码删掉，然后只要有scroll-y属性都是可以的， 45 46 关键是这个属性，放在scroll-view内的所有内容组成的页面才可以滚动。...给一个滚动的事件监听wrapScroll，当页面滚动的时候他就判断scroll-top的大小，如果大于我们设定的值（这里是500）的时候，他就执行一条设置数据的代码，否则就执行另一条设置数据的代码。...98 99 至于返回按钮的那个点击事件goTop，原理上就是要点击他，改变scroll-view的高度值，所以在函数中，直接setData，改变高度值为0，反映到页面上的效果就是页面返回到了顶部。...scroll-view必须有高度设置，但是又不能设置百分比时，高度值不能适配所有机型手机的问题： 假如我顶部需要固定定位一个元素，下边是可以滚动的页面。
下拉加载实现 首先是分页加载列表，从网上例子和文档来看有两种实现方式，一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数，另一种就是通过scroll-view组件上的...我这里用的后者，因为想使用有赞的加载UI，这里需要注意使用scroll-view需要设置height,不然事件不会触发，其他scroll-view上的属性可以参考文档： .scorll-margin {...回到顶部 在开发的时候发现滚到最底部再想回到最顶部不是很方便，于是想看看有没有直接回到顶部的功能。 结果看到文档scroll-view有属性支持，直接设为true就可以了。...blogId=' + blogId }) }, 滚动条位置问题 滚动条位置可以通过设置scroll-view的scroll-top属性，这个问题不大。...我在编写专题页的时候，由于顶部是悬浮固定的Tab页，在切换时记得重置下scroll-top的值。
前言 无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。...上面公式里“当前窗口顶部与很长元素顶部的距离 + offsetHeigh”在页面里是定死的，而 window.pageYOffset - window.innerHeight 会随着滚动而改变，两者相减则为...图示： 不过，这里的 “当前窗口顶部与很长元素顶部的距离” 这一步并不能通过变量来获得，只能用 JS 来获取： // 元素顶部到页面顶部的距离 calculateTopPosition(el:...对 touch 和 mouse 的事件监听不会阻塞页面的滚动，可提高页面滚动性能。详情可见这篇文章。...) 其中 calculateTopPosition 为递归地计算元素顶部到浏览器窗口顶部的距离 window 向上滚动：window.pageYOffset || doc.scrollTop 其中 doc
容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离，当接近0的时候就是到达底部的时候。 明白了这个原理上拉加载就很好实现了。...data： windowHeight: '',contentOffSetHeight: '',downT: '' 因为可视窗口和距离顶部的距离是不会变的，所以初始化的时候就赋值，downT是监听滚动防抖用的...这个可以去了解一下，就是不记住滚动的距离，刷新的时候就不会直接触发加载方法。...最后beforeDestroy： window.scrollTo(0, 0); window.removeEventListener('scroll', this.onScroll) 刷新当前页面或者离开页面的时候移动到最顶部...其实设置了这个移动到顶部也不需要，这边为了稳定就加上了。还有就是要移除监听滚动，我试了，跟定时间计时器一样，没有在组件销毁的时候移除，会一直存在。
一、前言、scroll-view基本属性： 前言： 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示（在我这个页面中同时使用了三个scroll-view做数据展示），因为这几个展示的内容的数据都比较的多...但是如使用scroll-view导致页面级没有滚动，则触底事件不会被触发，所以这里存在的问题是有时候无法触发onReachBottom。 ...第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件，第二个问题是当页面由第一个scroll-view（该页面已经到了的最底部了）切换到第二个scroll-view时会自动滚动到页面的最底部...(() => { //TODO这里填写你加载数据的方法 this.getData(); }, 1000)； }, 关于页面由第一个scroll-view切换到第二个scroll-view时会自动滚动到页面的最底部...为0，那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部，从而解决了默认滚动到最底部加载多次数据的问题。
整个统计方案需要解决以下几个关键问题： 滚动不超过一个item时的距离统计； 进来时停留在某一个item时的滚动距离统计； 快速滑动时的距离的统计； 2.2.1 滚动不超过一个item时的统计 因为我们整体的方案是通过累加...这里核心是通过系统提供的View的方法getTop来拿到该View最顶部距离其Parent的距离： /** * Top position of this view relative to...= mInitTop - mCurTop; 2.2.2 进来时停留在某一个item时的滚动距离统计； 如果是从当前页面A跳到其他页面B后，再跳转回来，此时当前页面A正常是停留在上一次浏览的位置（前提是页面...在进入该页面时，我们通过该itemView的getTop方法拿到的初始值：mInitTop，该值的绝对值就为橙色部分的高度。...这里有没有办法兼容快速滑动这种场景下的统计？
或者是嗖~一下就到顶的 回到顶部 。 又或者是想去哪点哪的 标题导航 。 ? 但是在过去的开发中，要实现这些功能并不是那么轻松的一件事情。...scroll 与 scrollTo scroll() 与 scrollTo 方法是用于在给定的元素中滚动到某个特定坐标的 Element 接口。...来来来，我给大家解释一下block跟inline的可选值到底是怎么回事： start：跟当前元素它爹的头发（顶部）对齐。 center：跟当前元素它爹的肚子（中间）对齐。...（吃瓜群众：“都没人理你~”） scroll-behavior跟上述各个scrollAPI 里的behavior一样，是用来定义页面进行滚动操作时的动画效果。...如果定义为smooth，则页面触发滚动操作时，就会有滚动的效果，如果为auto，则跟原来一样，是瞬间移动到指定位置。这指的是类似于点击#hash跳转一样的触发，而不是滑动滚动条。
什么是滚动穿透 如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。...刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的，于是监听 scroll/touchmove事件，阻止事件冒泡。 事实上，这并没有什么卵用。...;} 这个想法很美好，在不侵入JS的情况下禁止滚动，然而： 只加 overflow:hidden对移动端是无效的！...这样一来只需要在可滚动的容器上加入 can-scroll类名即可滚动，但是这种滚动又随之带来一个问题： 当滚动到元素顶部和底部再继续滚动时，又会触发滚动穿透！...可是从使用性质来考虑，还不是很便捷，尤其是现在如 React， Vue这类框架中，还需要考虑浮层什么时候实例化，什么时候应当调用 lock和 unlock显得有些麻烦，因此编写了一个React版本的组件
在 React 应用中，我们经常需要处理滚动事件（onScroll），以实现一些与滚动相关的功能，如无限滚动加载、滚动到顶部按钮等。...示例代码下面是一个示例代码，演示如何处理 React 中的滚动事件：import React, { useEffect } from 'react';const ScrollableComponent...节流和防抖当滚动事件频繁触发时，节流（throttling）和防抖（debouncing）是常用的技术，用于限制事件处理函数的执行次数。...下面是一个使用 lodash 的示例代码：import React, { useEffect } from 'react';import { throttle, debounce } from 'lodash...通过合理处理滚动事件，我们可以实现一些常见的滚动相关功能，如无限滚动加载、滚动到顶部按钮等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
