scrollIntoView方法滚动当前元素，进入浏览器的可见区域

m0_53574149

已于 2023-07-19 14:15:45 修改

阅读量464

点赞数

文章标签：前端 javascript html

于 2023-07-19 14:15:07 首次发布

本文链接：https://blog.csdn.net/m0_53574149/article/details/131807708

版权

scrollIntoView方法滚动当前元素，进入浏览器的可见区域

el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);

//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方（有兼容性问题）
document.querySelector("#part").scrollIntoView({ block: 'end', behavior: 'smooth' })
//这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方（有兼容性问题）
document.querySelector("part").scrollIntoView({ block: 'start', behavior: 'smooth' })
//这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方（无滚动动画效果）
document.querySelector("#part").scrollIntoView();//默认值就是true,可以不写
//这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方（无滚动动画效果）
document.querySelector("#part").scrollIntoView(false)

scrollIntoView()方法导致整个页面产生偏移

1.使用scrollTop代替scrollIntoView()
var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;
target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;
2.
var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

添加新节点 DOM上移展现在视口

const listRef = useRef(null);

  useEffect(() => {
    listRef.current = document.querySelectorAll('.widget .dragItem');
  }, [document.querySelectorAll('.widget .dragItem')]);

  const addItem = (add) => {
    add({ url: '', logo: '', name: '' })
    setTimeout(() => {
      let newNode = listRef.current[listRef.current.length - 1];
      newNode.scrollIntoView({ block: "center", behavior: "smooth", inline: "center" })
    },500)
  }