(已解决)scrollIntoView和scrollTo方法实现滚动条具体定位无效,offsetTop值不准确

2024-01-10 12:08:10

想实现父元素滚动条效果,子元素可以动态的改变定位,定位到父元素顶部
但是子元素的高度是不固定的,所以网上很多方法不具有参考价值
我开始实现用了scrollHeight来加子元素的高度实现,后来发现加完后高度总会高出来一部分,以下就是我找了一天时间踩的坑

(1)子元素父元素之间 需要有明确的关系

类似这样 多个span 被div包着那么div必须要有position定位 (2) 是否有高度塌陷问题
我踩的坑就是我div2给设置了固定高度50px 在计算滚动条还是offsetTop得时候span 获取到的值就不准确,因为我span是不固定高度的,所以就存在着Dom元素偏移,子元素塌陷的问题,只需要给div1与span之间的元素都改成自动计算高度即可 height:auto (3)scrollIntoView是子元素的方法 而 scrollTo是父元素的方法
 child.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
parent.scrollTo({
                    top: child.offsetTop,
                    behavior: "smooth"
                });

以上 parent和child都是指代的dom元素 可以用refs来取也可以用getElementById取

文章来源:https://blog.csdn.net/evennight/article/details/135496039
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。