滚动到div的底部？

我正在使用rails中的ajax请求创build一个聊天，我试图让一个div滚动到底部没有太多的运气。

我正在包装这个div的一切：

#scroll { height:400px; overflow:scroll; } 

有没有办法让它默认使用JS滚动到底部？

有没有办法让它滚动到底部ajax请求后？

Answer 1

这是我在我的网站上使用的（我没有写，我刚刚发现它，因为我不太了解Javascript。）

 var objDiv = document.getElementById("your_div"); objDiv.scrollTop = objDiv.scrollHeight; 

Answer 2

如果你使用jQuery，这会更容易：

 $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); 

Answer 3

使用jQuery的animation ：

 $('#DebugContainer').stop().animate({ scrollTop: $('#DebugContainer')[0].scrollHeight }, 800); 

Answer 4

您可以使用下面的代码：

 function scrollToBottom(id){ var div = document.getElementById(id); div.scrollTop = div.scrollHeight - div.clientHeight; } 

要执行平滑滚动，请使用以下代码（需要jQuery）：

 function scrollSmoothToBottom (id) { var div = document.getElementById(id); $('#' + id).animate({ scrollTop: div.scrollHeight - div.clientHeight }, 500); } 

请参阅JSFiddle上的示例

这就是它的工作原理：

参考： scrollTop ， scrollHeight ， clientHeight

Answer 5

jQuery版本：

 var mydiv = $("#scroll"); mydiv.scrollTop(mydiv.prop("scrollHeight")); 

从jQuery 1.6工作

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

Answer 6

较新的方法：

 this.scrollIntoView(false); 

Answer 7

如果你不想依靠scrollHeight ，下面的代码可以帮助你：

 $('#scroll').scrollTop(1000000); 

Answer 8

发现这真的很有帮助，谢谢。

对于那里的angular色们来说：

 angular.module('myApp').controller('myController', ['$scope', '$document', function($scope, $document) { var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div'); overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight; } ]); 

仅仅是因为jQuery元素与HTML DOM元素的包装与angular有些混淆。

另外对于一个聊天应用程序，我发现在你的聊天logging被加载之后做这个任务是有用的，你也可能需要在短时间内logging。

Answer 9

使用jQuery， scrollTop用于为任何给定的元素设置scollbar的垂直位置。 还有一个不错的jQuery的scrollTo插件用于滚动animation和不同的选项（ 演示 ）

 var myDiv = $("#div_id").get(0); myDiv.scrollTop = myDiv.scrollHeight; 

如果您想要使用jQuery的animation方法在向下滚动的同时添加animation，请检查以下片段：

 var myDiv = $("#div_id").get(0); myDiv.animate({ scrollTop: myDiv.scrollHeight }, 500); 

Answer 10

小编：只有卷轴，如果最后一行已经可见。 如果滚动一点，留下它的内容（注意：没有testing不同的字体大小，这可能需要在“> =比较”中进行一些调整）：

 var objDiv = document.getElementById(id); var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight); // add new content to div $('#' + id ).append("new line at end<br>"); // this is jquery! // doScroll is true, if we the bottom line is already visible if( doScroll) objDiv.scrollTop = objDiv.scrollHeight; 

Answer 11

就像一个奖励片段。 我正在使用angular度，并试图滚动消息线程底部时，用户select与用户不同的谈话。 为了确保在新的数据已经被加载到div的消息ng-repeat后，滚动工作，只是在超时包装滚动片段。

 $timeout(function(){ var messageThread = document.getElementById('message-thread-div-id'); messageThread.scrollTop = messageThread.scrollHeight; },0) 

这将确保在将数据插入DOM之后触发滚动事件。

Answer 12

这将使您可以一直向下滚动查看文档高度

 $('html, body').animate({scrollTop:$(document).height()}, 1000); 

Answer 13

Javascript或jQuery的：

 var scroll = document.getElementById('messages'); scroll.scrollTop = scroll.scrollHeight; scroll.animate({scrollTop: scroll.scrollHeight}); 

CSS：

  .messages { height: 100%; overflow: auto; } 

Answer 14

我遇到了同样的问题，但有一个额外的限制：我无法控制将新元素添加到滚动容器的代码。 我在这里find的例子都没有让我做到这一点。 这是我结束的解决scheme。

它使用了Mutation Observers （ https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ），它只能在现代浏览器上使用（尽pipe存在polyfills）

所以基本上这个代码就是这样的：

 var scrollContainer = document.getElementById("myId"); // Define the Mutation Observer var observer = new MutationObserver(function(mutations) { // Compute sum of the heights of added Nodes var newNodesHeight = mutations.reduce(function(sum, mutation) { return sum + [].slice.call(mutation.addedNodes) .map(function (node) { return node.scrollHeight || 0; }) .reduce(function(sum, height) {return sum + height}); }, 0); // Scroll to bottom if it was already scrolled to bottom if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) { scrollContainer.scrollTop = scrollContainer.scrollHeight; } }); // Observe the DOM Element observer.observe(scrollContainer, {childList: true}); 

我做了一个小提琴演示的概念： https : //jsfiddle.net/j17r4bnk/

Answer 15

您也可以使用jQuery，通过以下方式将animation附加到html,body文档的html,body ：

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

这将导致顺利滚动到ID“div-id”的div顶部。

Answer 16

我知道这是一个古老的问题，但是这些解决scheme都不适合我。 我结束了使用offset（）。top来获得所需的结果。 以下是我用来在屏幕上轻轻滚动至聊天应用程序中的最后一条消息：

 $("#html, body").stop().animate({ scrollTop: $("#last-message").offset().top }, 2000); 

我希望这可以帮助别人。

Answer 17

Java脚本：

document.getElementById('messages').scrollIntoView(false);

滚动到当前内容的最后一行。

Answer 18

一个非常简单的方法是将scroll to设置为div的高度。

 var myDiv = document.getElementById("myDiv"); window.scrollTo(0, myDiv.innerHeight);