javascript - 滚动到div底部 - 滚动到div的底部?




scrolltop (12)

我正在rails中使用ajax请求创建一个聊天,我试图让一个div滚动到底部,但没有多少运气。

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

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

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

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


Javascript或jquery:

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

CSS:

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

Java脚本:

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

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


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

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

以下是我在我的网站上使用的内容(我没有写,我只是发现它,因为我不太了解JavaScript。)

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

使用jQuery, scrollTop用于为任何给定的元素设置scollbar的垂直位置。 还有一个不错的jQuery的scrollTo插件,用于滚动动画和不同的选项( demos

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

如果您想要使用jQuery的动画方法在向下滚动时添加动画,请查看以下代码片段:

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

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

对于那里的Angular 1.X人来说:

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有些混淆。

同样对于聊天应用程序,我发现在您的聊天加载有用之后进行分配,您也可能需要在短暂超时时间内进行拍摄。


如果您使用jQuery,这会更容易:

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

小附录:如果最后一行已经可见,则仅滚动。 如果滚动一点点,就会将内容留在原来的位置(注意:未用不同的字体大小进行测试,这可能需要在“> =比较”中进行一些调整):

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;

您可以使用以下代码:

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上的JSFiddle

这就是它的工作原理:

JSFiddle

参考: scrollTopscrollHeightclientHeight


您还可以使用jQuery,通过以下方式将动画附加到html,body文档的html,body

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

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


我遇到了同样的问题,但有一个额外的限制:我无法控制将新元素附加到滚动容器的代码。 我在这里找到的例子都不允许我这样做。 这是我结束的解决方案。

它使用Mutation Observershttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ),它使得它仅适用于现代浏览器(尽管存在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/https://jsfiddle.net/j17r4bnk/


较新的方法:

this.scrollIntoView(false);




ajax