除非用户向上滚动，否则保持溢出div滚动到底部

Question

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

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

Answer 1

我刚刚实现了这一点，也许您可以使用我的方法。

假设我们有以下超文本标记语言：

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

然后我们可以检查它是否滚动到底部：

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

scrollHeight为您提供元素的高度，包括任何由于溢出而不可见的区域。clientHeight为您提供CSS高度，或者以另一种方式说，元素的实际高度。这两种方法都返回没有边距的高度，所以你不必担心。scrollTop给你垂直滚动的位置。0是top，max是元素的scrollHeight减去元素高度本身。当使用滚动条它可以是困难的（这是在Chrome我）得到滚动条一直到底部。因此，即使滚动条从底部算起是1px，isScrolledToBottom也将是true。你可以把这个设置成你觉得合适的。

然后只需将元素的scrollTop设置为底部。

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

我为你做了一把小提琴来展示这个概念：http://jsfiddle.net/dotnetCarpenter/KpM5j/

编辑：添加代码片段以澄清IsCrolledTobottom何时为true。

将滚动条粘到底部

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>

Answer 2

这可能会帮助您：

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;
});

Answer 3

我能够得到这个工作与CSS只。

诀窍是使用show： flex；和flex-方向：列反转；

浏览器对待底部就像对待顶部一样。假设您的目标浏览器支持flex-box，唯一的警告是标记必须以相反的顺序。

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