CSS-Only ? !

一个有趣的css替代方案:

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

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它不是万无一失的，但我发现它在一些情况下很有帮助。

文档:flex, flex-direction, overflow-y

演示:

var i=0, foo='Lorem Ipsum & foo在酒吧或blah !和“。分割(' '); setInterval(函数(){demo.innerHTML + = foo [i + + % foo。长度)+ ' '},200) #{演示显示:flex; flex-direction: column-reverse; overflow-y:滚动; 宽度:150 px; 身高:150 px; 边框:3px纯黑色;｝ 身体{字体类型:arial,无衬线; 字体大小:15 px;｝ Autoscrolling演示:& # x1f43e; < div id =“演示”> < / div >

你可以在任何需要调用它的地方使用这个函数:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com ScrollTo

我找到了一个诀窍。

在页面底部放置一个输入类型文本，并在需要时调用jquery focus。

使它为只读和漂亮的css清除边界和背景。

我们可以使用ref和by getElementById滚动特定的模态或页面。

 const scrollToBottomModel = () => {
    const scrollingElement = document.getElementById("post-chat");
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
  };

在模态体中，你可以调用上面的函数

 <Modal.Body
          className="show-grid"
          scrollable={true}
          style={{
            maxHeight: "calc(100vh - 210px)",
            overflowY: "auto",
            height: "590px",
          }}
          ref={input => scrollToBottomModel()}
          id="post-chat"
        >

会起作用

你也可以用动画来做这个，非常简单

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

希望有所帮助, 谢谢你！

我也遇到过同样的问题。对于我来说，在一个时间点上，div的元素没有完全加载，scrollTop属性是用scrollHeight的当前值初始化的，这不是scrollHeight的正确结束值。

我的项目在Angular 8中，我所做的是:

我使用viewchild来获取.ts文件中的元素。 我已经继承了AfterViewChecked事件，并在那里放置了一行代码，其中声明viewchild元素必须将scrollTop值的值scrollHeight (this.viewChildElement.nativeElement。scrollTop = this.viewChildElement.nativeElement.scrollHeight;)

AfterViewChecked事件触发了几次，它最终从scrollHeight中获得了正确的值。