scrollIntoView - 将不在浏览器窗口可见区域内的元素滚动到浏览器窗口的可见区域

使用方法一：直接调用

<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时元素可能顶部或底部对齐，视乎元素靠哪边更近。

 

posted @ 2021-09-29 15:39  天官赐福·  阅读(285)  评论(0)    收藏  举报
返回顶端