我有一个只有 300 像素大的 div，我希望它在页面加载时滚动到内容底部。此 div 具有动态添加到其中的内容，需要一直向下滚动。现在，如果用户决定向上滚动，我不希望它跳回到底部，直到用户再次向下滚动

是否有可能有一个 div 保持滚动到底部，除非用户向上滚动，并且当用户滚动回底部时，即使添加了新的动态内容，它也需要将自己保持在底部。我将如何创建这个。

网友回答：

我只能使用 CSS 来解决这个问题。

诀窍是使用：

display: flex;
flex-direction: column-reverse;

浏览器将底部视为顶部。假设您针对的浏览器支持 ，唯一需要注意的是标记必须以相反的顺序排列。flex-box

这是一个工作示例。https://codepen.io/jimbol/pen/YVJzBg

网友回答：

这可能有助于您：

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[编辑]，以匹配评论…

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

每当添加内容时，调用函数 updateScroll（） 或设置计时器：

//once a second
setInterval(updateScroll,1000);

如果只想在用户未移动时才更新：

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

网友回答：

我刚刚实现了这个，也许你可以使用我的方法。

假设我们有以下 HTML：

<div id="out" style="overflow:auto"></div>

Then we can check if it scrolled to the bottom with:

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight gives you the height of the element, including any non visible area due to overflow. clientHeight gives you the CSS height or said in another way, the actual height of the element. Both methods returns the height without , so you needn’t worry about that. scrollTop gives you the position of the vertical scroll. 0 is top and max is the scrollHeight of the element minus the element height itself. When using the scrollbar it can be difficult (it was in Chrome for me) to get the scrollbar all the way down to the bottom. so I threw in a 1px inaccuracy. So will be true even if the scrollbar is 1px from the bottom. You can set this to whatever feels right to you.marginisScrolledToBottom

Then it’s simply a matter of setting the scrollTop of the element to the bottom.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

I have made a fiddle for you to show the concept: http://jsfiddle.net/dotnetCarpenter/KpM5j/

EDIT:
Added code snippet to clarify when is .isScrolledToBottomtrue

Stick scrollbar to bottom

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    // allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    // scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}

#out {
    height: 100px;
}

<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>