概述
如何在 React 中实现 scrollTo 效果
之前考虑过用scrollInToView,但是由于这个 API 实现的场景不能控制元素在屏幕上的显示位置遂选择其他出路。
scrollTo 当只有一个元素需要直接滚动时 可以在 useEffect 直接调用 该方法即可。
当遇到需要控制一个有序数组的时候该如何操作。需求如下
- 可以点击按钮进行依次循环滚动。
- 需要控制住滚动时距离顶部的高度。
- 需要滚动的数组变化时,需要在滚动列表中添加或删除一条记录。
例如,在git MR 的详情页上有几个未解决的评论。在tab 页上需要一个快捷的点击按钮进行快速定位到需要解决的评论上去。
然而会遇到几个场景。
场景一:当页面上只需要定位到具体的某几条评论,不涉及评论解决后,跳转发生变化。这种是最简单的场景。我们实现的方案也会比较的简单。
即判定评论列表是否显示后,展示在 tab上一个跳转 btn 。然后把 未解决的评论通过一个字段筛选出来传入到一个记录的state 中. 其中通过 hook的 useEffect 计算出。一个未解决评论的位置数组。其中这个位置数组只根据 第一次 传入的 unResolved 计算一次。
这个时候你们可能会问怎么保证这个位置数组只计算一次。
// 设置一个 是否可以计算 dom 的标志位
const [canCountDom, setCanCo
最后
以上就是友好火龙果为你收集整理的react滚动到指定位置_react 中 scrollTo 引发的思考的全部内容,希望文章能够帮你解决react滚动到指定位置_react 中 scrollTo 引发的思考所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复