Question

我有一个div，可以随机插入段落。一旦div的大小比它的容器大，它当然会延伸到容器之外，从而在容器上创建滚动条。那部分还可以。 带有滚动条的容器不是页面，滚动条显示在父div上

问题有两个问题。当插入一个段落使div变大时，div会立即跳转到新的大小。经过足够多次，它会很快变得烦人。

另一个问题是，当div扩展到容器之外时，我可以轻松地使用javascript将容器一直向下滚动，但是，再一次，它是一次即时跳转，一次又一次地观看并不是很愉快。

我正在寻找一种方法来平滑这一点，让div平滑扩展以包含新段落并让父div在它超越它时顺利向下滚动。

还应该注意，这是一个电子html5应用程序，因此不需要跨浏览器解决方案或浏览器兼容性。只有一个适用于最新版的铬版本。我也不在乎解决方案是纯粹的javascript还是基于框架的。

这是可能的，如果可以的话，我该如何实现呢？

Answer 1

You can solve both issues with CSS and a little js. Choppy animations can benifit from transitions opacity and height would grow gradually to the new values by adding a class at creation.

.box { 
    opacity: 0;
    height: 1px;  
    transition: opacity 2s, height 2s; 
} 

.box.loading {
     opacity: 1;
     height: 200px;
 }

The insertion of elements should be followed by a smooth scroll you can archive that without jQuery see here Javascript smooth scroll WITHOUT the use of jQuery

ps: i'm writing this on a phone so i did not check the code.

动态添加内容时平滑Div扩展和滚动

1 个答案: