我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动
是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。
我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动
是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。
当前回答
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;
container.scrollTop = contentHeight - containerHeight;
以下是我基于dotnetCarpenter回答的版本。我的方法是一个纯jQuery和我命名的变量,使事情更清楚一点。发生的情况是,如果内容高度大于容器高度,我们向下滚动额外的距离以实现所需的结果。
工作在IE和chrome..
其他回答
以下是我的做法。div的高度是650px。我决定如果滚动高度在底部的150px范围内,那么自动滚动它。否则,留给用户。
if (container_block.scrollHeight - container_block.scrollTop < 800) {
container_block.scrollTo(0, container_block.scrollHeight);
}
我设法把它修好了。诀窍是计算:(a)当前div用户滚动位置和(b) div滚动高度,都是在附加新元素之前。
如果a === b,则在追加新元素之前就知道用户位于底部。
let div = document.querySelector('div.scrollableBox');
let span = document.createElement('span');
span.textContent = 'Hello';
let divCurrentUserScrollPosition = div.scrollTop + div.offsetHeight;
let divScrollHeight = div.scrollHeight;
// We have the current scroll positions saved in
// variables, so now we can append the new element.
div.append(span);
if ((divScrollHeight === divCurrentUserScrollPosition)) {
// Scroll to bottom of div
div.scrollTo({ left: 0, top: div.scrollHeight });
}
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;
这将使用$(document).height()属性从#yourDivID的高度计算滚动顶部位置,这样即使在div中添加了动态内容,滚动条也将始终位于底部位置。希望这能有所帮助。但它也有一个小错误,即使我们向上滚动并将鼠标指针从滚动条上保留下来,它也会自动回到底部位置。如果有人能纠正这一点,那就太好了。
. cont { 高地:100px; overflow-x:隐藏; overflow-y: auto; 用金币:rotate (180deg); 方向:rtl级; text-align:向左拐; 的 申{ 溢出:隐藏; 用金币:rotate (180deg); 的 < div级= cont”> <德> < li > 0 < / li > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < li > 6 < / li > < li > 7 < / li > < li > 8 < / li > < li > 9 < / li > < li > 10 < / li > < /德> < / div >
单击Run代码片段查看效果。(如果运行代码片段不起作用,请尝试以下方法:https://jsfiddle.net/Yeshen/xm2yLksu/3/。)
工作原理:默认情况下溢出滚动是从上到下。Transform: rotate(180deg)将此反转,因此滚动或加载动态块是从下到上的。
创意:https://blog.csdn.net/yeshennet/article/details/88880252
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;
container.scrollTop = contentHeight - containerHeight;
以下是我基于dotnetCarpenter回答的版本。我的方法是一个纯jQuery和我命名的变量,使事情更清楚一点。发生的情况是,如果内容高度大于容器高度,我们向下滚动额外的距离以实现所需的结果。
工作在IE和chrome..