react页面滚动到顶部-＞1.元素dom内部；2.windows滚动

吃痴鱼

已于 2023-05-26 14:46:19 修改

阅读量798

点赞数

分类专栏： js react 文章标签： react.js javascript 前端

于 2022-09-22 17:10:49 首次发布

本文链接：https://blog.csdn.net/qq_52685664/article/details/126995798

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

react

15 篇文章 0 订阅

订阅专栏

1.元素内部滚动

通过useRef获取元素信息，距离顶部的高度

const listRef = useRef();


 //页面滚动到顶部
  const pageScroll = () => {
    console.log(listRef?.current?.scrollTop);
    let timer = 0;
    clearInterval(timer);
    timer = setInterval(() => {
      if (listRef?.current?.scrollTop != 0) {
        listRef?.current?.scroll(0, Math.max(listRef?.current?.scrollTop - 50, 0));
      } else {
        clearInterval(timer);
      }
    }, 10);
  };


return(
<div 
style={{ width: '100%', height: ' calc(100% - 30px)', overflowY: 'scroll' }}
ref={listRef}>
{children}
</div>
)

2.windows滚动到顶部

 let timer = 0;
    clearInterval(timer);
    timer = setInterval(function () {
      if (window.pageYOffset != 0) {
        window.scroll(0, Math.max(window.pageYOffset - 50, 0));
      } else {
        clearInterval(timer);
      }
    }, 10);

  if (window.pageYOffset != 0) {
      window.scroll(0, 0);
    }

3.js操作滚动到顶部

 //页面滚动到顶部
  const pageScroll = () => {
    var oDivs = document.getElementById('cardListWrap');
    let timer = 0;
    clearInterval(timer);
    timer = setInterval(() => {
      /* if (listRef?.current?.scrollTop != 0) {
        listRef?.current?.scroll(0, 0);
      } else {
        clearInterval(timer);
      } */
      if (oDivs.scrollTop != 0) {
        oDivs.scroll(0, Math.max(oDivs.scrollTop - 50, 0));
      } else {
        clearInterval(timer);
      }
    }, 10);
  };

一步到位：xx.scroll(0,0)