react滚动到指定位置_react 中 scrollTo 引发的思考

本文探讨了在React应用中如何实现scrollTo效果,特别是在处理有序数组和控制元素显示位置时的策略。针对需要依次循环滚动的需求,提到了在useEffect中直接调用scrollTo方法。同时,文章指出在评论列表场景中,当评论状态改变导致滚动列表更新时,如何确保滚动位置的准确性是一个挑战。现有的解决方案可能在不同排序和搜索条件下失效,需要动态或静态计算DOM位置。文章结尾指出,当元素已解决导致列表变化时,实时计算DOM位置的方法面临可视范围和手动滚动的不确定性问题,目前仍在寻求完善解决方案。
摘要由CSDN通过智能技术生成

如何在 React 中实现 scrollTo 效果

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

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

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

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

cd2f970cc71eaa4971197cc076628298.png

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

然而会遇到几个场景。

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

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

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

// 设置一个 是否可以计算 dom 的标志位  
const [canCountDom, setCanCo
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React设置锚点与普通的HTML页面类似,但需要注意一些细节。下面是在滚动的div设置锚点的步骤: 1. 给需要设置锚点的元素添加一个唯一的ref属性,例如: ```jsx <div ref={el => this.section1 = el}>这是第一部分的内容</div> <div ref={el => this.section2 = el}>这是第二部分的内容</div> <div ref={el => this.section3 = el}>这是第三部分的内容</div> ``` 2. 在页面创建一个指向该元素的锚点链接,例如: ```jsx <a href="#" onClick={() => this.scrollTo(this.section1)}>跳转到第一部分</a> <a href="#" onClick={() => this.scrollTo(this.section2)}>跳转到第二部分</a> <a href="#" onClick={() => this.scrollTo(this.section3)}>跳转到第三部分</a> ``` 注意,在React,我们需要使用onClick事件来监听锚点链接的点击事件,而不是使用普通的<a>标签。 3. 在滚动的div组件,使用ref属性引用该元素,并且监听scroll事件。然后,实现一个scrollTo方法,该方法可以将页面滚动指定元素的位置。 ```jsx class ScrollableDiv extends React.Component { scrollTo = (ref) => { if (ref) { ref.scrollIntoView({ behavior: "smooth" }); } } render() { return ( <div className="scrollable" onScroll={this.handleScroll}> <div ref={el => this.section1 = el}>这是第一部分的内容</div> <div ref={el => this.section2 = el}>这是第二部分的内容</div> <div ref={el => this.section3 = el}>这是第三部分的内容</div> </div> ); } } ``` 在该例子,我们使用scrollIntoView方法将页面滚动指定元素的位置,并且将滚动的过程设置为平滑的。 这样,我们就可以在React实现在滚动的div设置锚点的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值