滚动到div的底部?

JavaScript

DavaidL

2020-03-10

我正在使用Rails中的Ajax请求创建聊天,并且试图使div滚动到底部没有太多运气。

我将所有内容包装在这个div中:

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

有没有一种方法可以使用JS将其默认滚动到底部?

有没有办法在ajax请求之后将其滚动到底部?

第515篇《滚动到div的底部?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
小小乐 2020.03.10

我知道这是一个老问题,但是这些解决方案都不适合我。我最终使用offset()。top获得所需的结果。这是我用来将屏幕轻轻向下滚动到聊天应用程序中的最后一条消息的方法:

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

我希望这可以帮助其他人。

小小老丝 2020.03.10

您可以像这样使用HTML DOM scrollIntoView方法:

var element = document.getElementById("scroll");
element.scrollIntoView();
JinJin 2020.03.10

滚动到div中的最后一个元素:

myDiv.scrollTop = myDiv.lastChild.offsetTop
Sam前端 2020.03.10

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

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
古一NearEva 2020.03.10

有时,最简单的方法是最好的解决方案:我不知道这是否会有所帮助,也可以帮助我滚动所需的内容。“ y =“越高,它向下滚动的越多,当然“ 0”表示顶部,因此例如“ 1000”可以在底部,或者“ 2000”或“ 3000”,依此类推,具体取决于您页面是。通常在带有onclick或onmouseover的按钮中起作用。

window.scrollTo(x=0,y=150);
A逆天猿 2020.03.10

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

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

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

西门小小 2020.03.10

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

它使用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/

飞云西里神乐 2020.03.10

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

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

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

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);
西门村村古一 2020.03.10

如果您使用的是jQuery scrollTop,这会容易得多

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
Near路易小胖 2020.03.10
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6的作品

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

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

JinJinLEY 2020.03.10

这是我在网站上使用的内容:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
十三西门伽罗 2020.03.10

适用于所有当前浏览器的较新方法

this.scrollIntoView(false);

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android