首页 文章

滚动到div的底部？

提问于
浏览 次
649

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

我在这个div中包装一切：

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

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

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

javascript html ajax

18 回答

  • 6

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

    var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
    回复于
  • 2

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

    $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
    回复于
  • 3

    使用jQuery animate：

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

    您可以使用以下代码：

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

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

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

    请参阅JSFiddle sample

    这就是它的工作原理：

    enter image description here

    参考：scrollTop，scrollHeight，clientHeight

    回复于
  • 4
    var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

    适用于jQuery 1.6

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

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

    回复于
  • 85

    较新的方法：

    this.scrollIntoView(false);
    回复于
  • 0

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

    $('#scroll').scrollTop(1000000);
    回复于
  • 327

    使用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);
    回复于
  • 19

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

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

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

    回复于
  • 3

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

    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;
    回复于
  • 4

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

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

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

    回复于
  • 11

    Javascript或jquery：

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

    CSS：

    .messages
 {
      height: 100%;
      overflow: auto;
  }
    回复于
  • 1060

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

    $('html, body').animate({scrollTop:$(document).height()}, 1000);
    回复于
  • 6

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

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

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

    回复于
  • 32

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

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

    回复于
  • 1

    Java脚本：

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

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

    回复于
  • 1

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

    var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
    回复于
  • 74

    我知道这是一个老问题，但这些解决方案都不适用于我 . 我最终使用offset（） . top来获得所需的结果 . 以下是我习惯轻轻地 scroll the screen down 到聊天应用程序中的最后一条消息：

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

    我希望这有助于其他人 .

    回复于

相关问题