js元素滚动到视图内_js将元素滚动到可视范围

作者：Monodyee | 2024-03-23 13:18:27

踩

js将元素滚动到可视范围

在长表单填写中，有时候在表单提交的时候需要定位到出错的表单项，以便给用户更好的体验

直接调用js的scrollIntoView方法，具体用法参考webApi


// 需要显示的元素
const element = document.getElementById("box");
 
// 元素的顶部将与可滚动祖先的可见区域的顶部对齐
element.scrollIntoView();

上述方法存在一些兼容问题，如果对兼容性要求比较高，可以采用 scroll-into-view-if-needed插件


import scrollIntoView from 'smooth-scroll-into-view-if-needed';
 
scrollIntoView(node, {
  behavior: 'smooth',
  scrollMode: 'if-needed',
});

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/295394