关于平滑滚动

有些时候,我们需要用代码去控制滚动条滚动到指定位置,同时希望滚动效果很平滑,而不是很生硬的直接就滚动了,用户几乎都感知不到。
方案一:操作容器元素

const dom = document.querySelector('.list-body');//滚动容器dom
dom.scrollTop = height;

这一行只是让滚动到指定的位置,还需要css才可以让滚动效果平滑

 .list-body {
    overflow: auto;
    scroll-behavior: smooth;
    ...
  }

方案二:操作内容元素
Element.scrollIntoView() 方法, 让当前的元素滚动到浏览器窗口的内。
详见MDN

你可能感兴趣的:(css前端)