我是靠谱客的博主 友好火龙果,最近开发中收集的这篇文章主要介绍react滚动到指定位置_react 中 scrollTo 引发的思考,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

如何在 React 中实现 scrollTo 效果

之前考虑过用scrollInToView,但是由于这个 API 实现的场景不能控制元素在屏幕上的显示位置遂选择其他出路。

scrollTo 当只有一个元素需要直接滚动时 可以在 useEffect 直接调用 该方法即可。

当遇到需要控制一个有序数组的时候该如何操作。需求如下

  1. 可以点击按钮进行依次循环滚动。
  2. 需要控制住滚动时距离顶部的高度。
  3. 需要滚动的数组变化时,需要在滚动列表中添加或删除一条记录。

cd2f970cc71eaa4971197cc076628298.png

例如,在git MR 的详情页上有几个未解决的评论。在tab 页上需要一个快捷的点击按钮进行快速定位到需要解决的评论上去。

然而会遇到几个场景。

场景一:当页面上只需要定位到具体的某几条评论,不涉及评论解决后,跳转发生变化。这种是最简单的场景。我们实现的方案也会比较的简单。

即判定评论列表是否显示后,展示在 tab上一个跳转 btn 。然后把 未解决的评论通过一个字段筛选出来传入到一个记录的state 中. 其中通过 hook的 useEffect 计算出。一个未解决评论的位置数组。其中这个位置数组只根据 第一次 传入的 unResolved 计算一次。

这个时候你们可能会问怎么保证这个位置数组只计算一次。

// 设置一个 是否可以计算 dom 的标志位  
const [canCountDom, setCanCo

最后

以上就是友好火龙果为你收集整理的react滚动到指定位置_react 中 scrollTo 引发的思考的全部内容,希望文章能够帮你解决react滚动到指定位置_react 中 scrollTo 引发的思考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(63)

评论列表共有 0 条评论

立即
投稿
返回
顶部