domin520Jian

使用方法一:直接调用

<body>

  <div class="chunk" style={{height:1800}}></div>

  <div class="btn">click</div>

  <script>

    const btn = document.querySelector(\'.btn\');

    const test = document.querySelector(\'.chunk\');//获取到需要滚动的元素

    btn.addEventListener(\'click\', function() { test.scrollIntoView(); })//直接对滚动元素使用该方法,可以将元素滚动到可视区域最上边

  </script>

</body>

使用方法二:接收布尔类型参数

  test.scrollIntoView(true);//滚动元素的顶端将和其所在滚动区的可视区域的顶端对齐

  test.scrollIntoView(false);//滚动元素的顶端将和其所在滚动区的可视区域的底端对齐

使用方法三:接收对象类型参数

  btn.addEventListener(\'click\', function() { test.scrollIntoView({ block: \'start\', behavior: \'smooth\' }); });

    block属性值:start-滚动到顶部; end-滚动到底部

    behavior属性值:auto-瞬间跳到相应的位置; instant-瞬间跳到相应的位置;smooth-有动画跳到相应位置

 

相关方法:scrollIntoViewIfNeeded

  scrollIntoViewIfNeeded是比较懒散的,如果元素在可视区域,那么调用它的时候,页面是不会发生滚动的。

  其次是scrollIntoViewIfNeeded只有Boolean型参数,也就是说,都是瞬间滚动,没有动画的可能了。

  true为默认值,但不是滚动到顶部,而是让元素在可视区域中居中对齐;

  false时元素可能顶部或底部对齐,视乎元素靠哪边更近。

 

分类:

技术点:

相关文章: