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 scrollTop：

，这会容易得多

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

Answer 3

使用jQuery animate：

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

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

从jQuery 1.6开始

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

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

Answer 6

适用于all current browsers的新方法：

this.scrollIntoView(false);

Answer 7

如果您不想依赖scrollHeight，则以下代码会有所帮助：

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

Answer 8

使用jQuery，scrollTop用于设置任何给定元素的scollbar的垂直位置。还有一个很好的jquery scrollTo plugin用于滚动动画和不同的选项（demos）

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

如果您想在向下滚动时使用jQuery's animate method添加动画，请查看以下代码段：

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

Answer 9

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

对于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 10

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

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

Answer 11

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

我尝试了@Jeremy Ruten的答案，它起作用了，但是它正在滚动到第（n-1）个元素。如果有人遇到此类问题，则可以使用setTimeOut()方法解决方法。您需要将代码修改如下：

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

这是我创建的StcakBlitz链接，其中显示了问题及其解决方案：docs

Answer 12

Javascript或jquery：

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

的CSS：

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

Answer 13

就像奖金片段一样。我正在使用angular，并且当用户选择与用户的不同对话时，尝试将消息线程滚动到底部。为了确保在使用ng-repeat for messages将新数据加载到div之后滚动工作，只需将滚动片段包装在超时中。

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

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

Answer 14

小附录：仅限滚动，如果最后一行已经可见。如果滚动一点点，将内容留在原处（注意：没有使用不同的字体大小进行测试。这可能需要在“＆gt; =比较”中进行一些调整）：

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 15

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

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

基本上代码就是这样：

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 16

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

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

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

Answer 17

这将让您一直向下滚动文档高度

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

Answer 18

Java脚本：

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

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

Answer 19

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

myDiv.scrollTop = myDiv.lastChild.offsetTop

Answer 20

流畅，使用Javascript滚动：

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

Answer 21

在Angular 6应用程序中，我只是这样做了：

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

clearInterval（interval）函数将停止计时器，以允许手动滚动顶部/底部。

Answer 22

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

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

Answer 23

替代方案

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

Answer 24

我知道这是一个老问题，但这些解决方案都不适用于我。我最终使用offset（）。top来获得所需的结果。以下是我过去轻轻地滚动屏幕到聊天应用程序中的最后一条消息：

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

我希望这有助于其他人。

Answer 25

我使用第一个项目div的Y坐标与所选项目div的Y坐标之间的差。这是JavaScript / JQuery代码和html：

function scrollTo(event){
        // In my proof of concept, I had a few <button>s with value 
        // attributes containing strings with id selector expressions
        // like "#item1".
        let selectItem = $($(event.target).attr('value'));
        let selectedDivTop = selectItem.offset().top;

        let scrollingDiv = selectItem.parent();

        let firstItem = scrollingDiv.children('div').first();
        let firstItemTop = firstItem.offset().top;

        let newScrollValue = selectedDivTop - firstItemTop;
        scrollingDiv.scrollTop(newScrollValue);
    }

<div id="scrolling" style="height: 2rem; overflow-y: scroll">
  <div id="item1">One</div>
  <div id="item2">Two</div>
  <div id="item3">Three</div>
  <div id="item4">Four</div>
  <div id="item5">Five</div>
</div>

Answer 26

您可以使用Element.scrollTo()方法。

可以使用内置的浏览器/ OS动画对其进行动画处理，因此非常流畅。

function scrollToBottom() {
    const scrollContainer = document.getElementById('container');
    scrollContainer.scrollTo({
        top: scrollContainer.scrollHeight,
        left: 0,
        behavior: 'smooth'
    });
}

// initialize dummy content
const scrollContainer = document.getElementById('container');
const numCards = 100;
let contentInnerHtml = '';
for (let i=0; i<numCards; i++) {
  contentInnerHtml += `<div class="card mb-2"><div class="card-body">Card ${i + 1}</div></div>`;
}
scrollContainer.innerHTML = contentInnerHtml;

.overflow-y-scroll {
  overflow-y: scroll;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column vh-100">
  <div id="container" class="overflow-y-scroll flex-grow-1"></div>
  <div>
    <button class="btn btn-primary" onclick="scrollToBottom()">Scroll to bottom</button>
  </div>
</div>

Answer 27

仅 CSS：

.scroll-container {
  overflow-anchor: none;
}

使滚动条在添加子元素时不会停留在顶部。例如，在聊天底部添加新消息时，将聊天滚动到新消息。

Answer 28

使用：

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

或检查滚动到底部：

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

Answer 29

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

window.scrollTo(x=0,y=150);

Answer 30

将距可滚动元素顶部的距离设置为元素的总高度。

Answer 31

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

:root

Answer 32

如果这样做是为了滚动到聊天窗口的底部，请执行以下操作

在聊天中滚动到特定div的想法如下

1）每个由Person，时间和消息组成的div都在带有chatContentbox类的for循环中运行

2）querySelectorAll查找所有此类数组。可能是400个节点（400个聊天）

3）转到最后一个

4）scrollIntoView（）

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView();

滚动到div的底部？

32 个答案: