我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
我正在使用Ajax请求创建聊天,我试图让消息div滚动到底部没有太多运气。
我将所有内容都包装在这个div中:
#scroll {
height:400px;
overflow:scroll;
}
是否有一种方法来保持它滚动到底部默认使用JS?
有办法保持它滚动到ajax请求后的底部吗?
当前回答
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
来自jQuery 1.6的工作
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
其他回答
您可以使用Element.scrollTo()方法。
它可以使用内置的浏览器/操作系统动画,所以它非常流畅。
function scrollToBottom() { const scrollContainer = document.getElementById('container'); scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, left: 0, behavior: 'smooth' }); } // initialize dummy content const scrollContainer = document.getElementById('container'); const numCards = 100; let contentInnerHtml = ''; for (let i=0; i<numCards; i++) { contentInnerHtml += `<div class="card mb-2"><div class="card-body">Card ${i + 1}</div></div>`; } scrollContainer.innerHTML = contentInnerHtml; .overflow-y-scroll { overflow-y: scroll; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex flex-column vh-100"> <div id="container" class="overflow-y-scroll flex-grow-1"></div> <div> <button class="btn btn-primary" onclick="scrollToBottom()">Scroll to bottom</button> </div> </div>
为什么不使用简单的CSS来做到这一点呢?
诀窍是使用display: flex;和弯曲方向:列反向;
Here is a working example. https://codepen.io/jimbol/pen/YVJzBg
将到可滚动元素顶部的距离设置为元素的总高度。
const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight
平滑滚动Javascript:
. getelementbyid(“信息”)。scrollIntoView({behavior: 'smooth', block: 'end'});
一个非常简单的方法是将滚动设置为div的高度。
var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);