滚动到div的底部？

Question

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

我在这个div中包装一切:

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

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

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

Answer 1

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

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

Answer 2

如果你使用jQuery,这会容易得多:

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

Answer 3

使用jQuery动画:

$('#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

替代解决方案

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

Answer 6

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

适用于jQuery 1.6

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

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

Answer 7

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

this.scrollIntoView(false);

Answer 8

如果您的项目面向现代浏览器，您现在可以使用CSS Scroll Snap来控制滚动行为，例如将任何动态生成的元素保留在底部。

    .wrapper > div {
        background-color: white;
        border-radius: 5px;
        padding: 5px 10px;
        text-align: center;
        font-family: system-ui, sans-serif;
    }

    .wrapper {
        display: flex;
        padding: 5px;
        background-color: #ccc;
        border-radius: 5px;
        flex-direction: column;
        gap: 5px;
        margin: 10px;
        max-height: 150px;

        /* Control snap from here */
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-snap-type: y mandatory;
    }

    .wrapper > div:last-child {
        scroll-snap-align: start;
    }

<div class="wrapper">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>
</div>

Answer 9

无需 JavaScript 的方法 (2023)

这是一个根本不需要任何 JavaScript 并使用纯 (Flexbox) CSS 的方法。我已经在这里更详细地解释了该方法。

诀窍是将项目放入“content”元素中，该元素包裹在一个充当column-reverse“滚动条”的 Flexbox 元素内。由于这些项目位于另一个（“内容”）容器中，因此它们不会“翻转”，而是始终排列在底部。事实上，每当添加内容时，这都会使滚动条滚动到底部。

这种方法的优点

除了不依赖 JavaScript 之外，此方法的一大优点是，当用户开始滚动列表时，滚动位置保持固定在用户滚动到的位置。这可以防止添加新项目时出现烦人的内容跳转。一旦用户再次滚动回到底部，列表在更新时将保持滚动到底部。

演示

注意：下面演示中的 JavaScript仅是演示本身所必需的（将项目添加到列表中，看看会发生什么）。

let scrollerContent = document.getElementById('scrollerContent');

document.getElementById('addItems').addEventListener('click', function() {
  let newChild = scrollerContent.lastElementChild.cloneNode(true);
  newChild.innerHTML = "Item " + (scrollerContent.children.length + 1);
  scrollerContent.appendChild(newChild);
});

.scroller {
  overflow: auto;
  height: 100px;
  display: flex;
  flex-direction: column-reverse;
}

.scroller .scroller-content .item {
  height: 20px;
  transform: translateZ(0); /* fixes a bug in Safari iOS where the scroller doesn't update */
}

<div class="scroller">
  <div class="scroller-content" id="scrollerContent">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>
<br/><br/>
<button id="addItems">Add more items</button>

Answer 10

使用JavaScript 平滑滚动：

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

Answer 11

如果您不想依赖scrollHeight,以下代码有助于:

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

Answer 12

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

对于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有点混淆.

另外,对于聊天应用程序,我发现在你的聊天被加载后做出这个任务是有用的,你也可能需要打一个短暂的超时.

Answer 13

Java脚本：

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

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

Answer 14

和您一样，我正在构建一个聊天应用程序，并希望最新的消息滚动到视图中。这最终对我来说效果很好：

//get the div that contains all the messages
let div = document.getElementById('message-container');

//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

Answer 15

使用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);

Answer 16

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

它使用Mutation Observers（https://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/

Answer 17

Javascript 或 jquery：

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

css：

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

Answer 18

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

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

Answer 19

我的场景：我有一个字符串列表，我必须在其中附加用户给出的字符串并自动滚动到列表的末尾。我有固定的列表显示高度，之后它应该溢出。

我尝试了@Jeremy Ruten 的回答，它奏效了，但它正在滚动到第 (n-1) 个元素。如果有人面临此类问题，您可以使用setTimeOut()方法解决方法。您需要将代码修改为以下：

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

这是我创建的 StcakBlitz 链接，其中显示了问题及其解决方案：https ://stackblitz.com/edit/angular-ivy-x9esw8