Question

我想从底部附加div。在某个时刻，垂直滚动应该启动，以便您可以查看之前附加的div。我试图复制一个典型的聊天应用程序以及消息来自底层的方式。这是代码笔......

在我提出代码之前，我将解释迄今为止我尝试过的几种解决方法。笔目前的容器绝对位于底部0.问题是痛苦，一旦高度超出视口的高度，它就不会滚动。这是绝对定位解决方法的问题。

我尝试的另一种解决方法是使用100vh的高度并使用justify-content flex-end显示flex，以便列从底部开始。这个问题是滚动总是从顶部开始。我相信解决方案是我创建的滚动功能，每次添加新div时都会滚动到底部。这是最好的方法吗？这里的关键是我希望能够向上滚动到较旧的div，但是较新的div从底部开始。想想一个典型的聊天应用程序，如松弛或消息或类似的。

HTML

<button onclick="myFunction()">Hey here's a box</button>

<div id="container">
</div>

CSS

body {
    margin: 0;
    width: 100%;
}

button {
    position: fixed;
    z-index: 10;
}

#container {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#box {
    width: 100%;
    background: tomato;
    opacity: 0;
    height: 100px;
    transition: .2s;
}

#box:last-child {
    opacity: 1;
    height: 0;
    animation: .2s height linear forwards;
}

@keyframes height {
    to {
        height: 100px;
    }
}

#box:nth-last-child(2) {
    opacity: .8;
}

#box:nth-last-child(3) {
    opacity: .6;
}

#box:nth-last-child(4) {
    opacity: .4;
}

#box:nth-last-child(5) {
    opacity: .2;
}

JS

function myFunction() {
    var box = document.createElement("div");
    box.setAttribute("id", "box");
    var container = document.getElementById('container');
    container.appendChild(box);

    // window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

}

有没有比我创建的滚动到底部的功能更好的解决方案？非常感激。

Answer 1

好的，所以在弄乱了一些JS后，我想通了。我喜欢这种情况......

这是codepen ......

http://codepen.io/jareko999/pen/yaQmgk

我创建了一个setInterval函数，用于滚动到底部。

var myVar = setInterval(function(){ 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}, .1);

但是，由于此间隔每隔0.1秒运行一次，我需要将其删除才能滚动上面的div（就像旧的聊天消息一样），但我希望动画（新的div进入）完成。所以，我创建了一个setTimeout函数来在200毫秒时终止setInterval函数。

setTimeout(function(){ 
    clearInterval(myVar);
}, 200);

使用滚动从底部附加div - 聊天应用示例

1 个答案: