滚动条隐藏的dom滚动到当前视图的功能实现复盘

前端amanda

已于 2022-08-28 09:08:55 修改

阅读量223

点赞数 1

分类专栏：项目踩坑文章标签： javascript 前端开发语言

于 2022-08-28 09:07:36 首次发布

本文链接：https://blog.csdn.net/weixin_45392774/article/details/126566108

版权

项目踩坑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求定位：

要实现功能：实现指示器中当前等级滚动到视口

什么时候滚？页面一进来（useEffect）

思路一:

1.计算出最后一个等级的dom距离父级dom左上角的距离distance，

2.把父级滚动条scrollTo（distance，0）

方案一：document.getElementById获取dom

父id="indicatorsParent" 子id={`indicators-${index}`}
const distance = document.getElementById(`indicators-${indicatorIndex}`).offsetLeft
document.getElementById('indicatorsParent').scrollTo( distance, 0)

方案二：ref获取dom

父ref={indicatorsListRef} 
子ref={e=>{indicatorsRefList.current[`indictorsItem-${index}`]=e}} 
//indicatorsRefList.current[`indictorsItem-${indicatorIndex}`]中indictorsItem-${indicatorIndex}是某一个具体类名 
//获取当前等级距离父元素左边距离
const distance = indicatorsRefList.current[`indictorsItem-${indicatorIndex}`].offsetLeft 
//把盒子中滚动条滚动到相应的距离
indicatorsListRef.current.scrollTo( distance, 0)

思路二：

直接让当前子dom（对应index)出现再视野范围内（浏览器自带的scrollIntoView()）

indicatorsRefList.current[`indictorsItem-${indicatorIndex}`].scrollIntoView()

补充需求：当点击最右边时候后一个出现在视野中，点击最左边前一个出现在视野中

1.寻找点击事件

2.把index—1和index+1 滚动到当前视野

3.需要判断极限情况：若已经是第一个显示第一个大与最后一个（数组长度-1）显示最后一个

4.代码优化善于用es6语法

综上：

1.没有滚动条解决方案自己的思路，严重依赖与参考别人思路，导致被陷进去了

2.对于scrollTo（element.scrollTo(0, 1000)） offsetLeft（可直接获取距离父元素最左边的距离） scrollIntoView（页面可滚动时有用）用的不熟

3.不熟悉ref的使用（注意函数式组件和类组件中ref不同用法）