方案1 让容器的滚动条top值等于容器的滚动条高度
containerEl.scrollTop = containerEl.scrollHeight
方案2 让元素的最后一项执行scrollIntoView(false)
具体见demo吧
<!DOCTYPE html> <html lang="en"> <head> <style> .container { border: solid 1px #ccc; width: 200px; height: 200px; overflow-y: auto; } </style> </head> <body> <button id="btn1">to bottom 1</button> <button id="btn2">to bottom 2</button> <div class="container"> <div class="item">first item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">last item</div> </div> <script> var containerEl = document.querySelector(".container") var btn1El = document.querySelector("#btn1") var btn2El = document.querySelector("#btn2") btn1El.addEventListener("click", function () { containerEl.scrollTop = containerEl.scrollHeight }) btn2El.addEventListener("click", function () { let lastItemEl = document.querySelectorAll(".item") lastItemEl[lastItemEl.length - 1].scrollIntoView(false) }) </script> </body> </html>