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
时元素可能顶部或底部对齐,视乎元素靠哪边更近。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通