设置

Question

我有一些简单的标记...

<div class="container">

    <div id="conversation">...</div>

    <div class="keyboard">...</div>

</div>

设计为垂直弹性框......

.container {
    margin: 1em 1em 0;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}

#conversation {
    overflow-y: scroll;
    box-sizing: border-box;
    margin-bottom: auto;
    flex: 1 1 80%;
}

.keyboard {
    padding: 2rem;
    box-sizing: border-box;
}

我只想将.conversation的滚动位置一直移到底部：

var scrollConvo = function() {
    var convo = document.getElementById('conversation');
    console.log('scrollTop', convo.scrollTop); // scrollTop 174
    console.log('scrollHeight', convo.scrollHeight); // scrollHeight 426
    convo.scrollTop = convo.scrollHeight;
    console.log('scrollTop', convo.scrollTop); // scrollTop 252
}

但这并不像预期的那样有效。滚动位置移动，但不是一直移动到底部。正如您在console.log语句旁边的注释中看到的那样，值不设置为我期望的值。我没有对结果值的解释。为什么不是scrollTop 426？

更新1 我做了一个工作jsfiddle，做我想要的，但我不知道为什么它的工作，但我的不工作：http://jsfiddle.net/khj4903t/48/

Answer 1

嗯，scrollHeight是元素的实际内容高度。

另一方面，scrollTop是已发生的实际滚动量。

如果元素高度小于scrollHeight，则会出现滚动条。允许的滚动范围是从0到（元素高度 - 滚动高度）。

因此元素的高度为100像素，内容为250像素。因此隐藏了150个像素（并且可用于scrollTop ）。

• 元素高度：100px
• scrollHeight：250px
• initial scrollTop：0

元素在到达底部之前可以滚动150个像素。将其设置为更高的值只会将其设置为最大值。因此将其设置为250只会将其设置为150。