scrollIntoView 导致外层滚动问题解决


字数:288 阅读时长:1分钟 阅读:85

最近使用 scrollIntoView 方法实现一个移动端 H5 的吸底效果,但是在使用过程中发现了一个问题,就是在使用 scrollIntoView 方法后,外层(body)的滚动条也会跟着滚动,大大影响用户体验,经过白班折腾,最后使用 scrollTop 代替 scrollIntoView 实现滚动。

scrollTop & scrollIntoView

问题复现

如上图所示,下方的红色区域是一个滚动视口 (scrollParentEle),蓝色区域是我们要滚动的内容(srcollContentEle),使用 scrollIntoView 方法滚动 srcollContentEle 内容。

1
2
// scrollContentEle 吸底
scrollContentEle.scrollIntoView({ behavior: 'smooth', block: 'end' });

这样实现能达到 scrollContentEle 的吸底效果,但是会发现外层(绿色部分)的滚动条也会跟着滚动。

解决方案

使用 scrollTop 代替 scrollIntoView 实现滚动,scrollContentEle.offsetHeight 是需要滚动吸底内容的高度,当然也可以根据具体需求来计算这个值,示例代码如下:

1
scrollParentEle.scrollTop = scrollContentEle.offsetHeight;

scrollTop 和 scrollIntoView 的区别

  • scrollTop 是作用于父级视口元素
  • scrollIntoView 是作用于需要滚动的元素

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-08-02
最后更新: 2024-01-12
本文标题: scrollIntoView 导致外层滚动问题解决
本文链接: https://www.tiven.cn/p/10d9b5b9/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!