【问题标题】：Scroll to the Bottom of Dynamic Div滚动到动态 div 的底部
【发布时间】：2016-01-13 07:27:41
【问题描述】：

我有一个 ID 为“page-content”的div，它没有height 或width，它只有一个空白div。

我正在动态地用内容填充div，所以div 的高度不断增长，我正在聊天，我想检测我是在 div 的底部还是在最后div 总高度的 10%，如果为真，则滚动到底部

var box = $('#page-content');
if (box.scrollTop() > (box.height*0.90))
    box.scrollTop(25000); // This is the top bottom

我想要做的是，检查你是否在"#page-content" div 的最后 10% 或更少的顶部底部高度（而不是当我在 div 开头阅读“旧消息”时），我有一个附加新消息的功能，但我需要手动向下滚动才能看到新消息......所以我想自动滚动到 New 底部，以便我可以看到新消息:)

更新：

function getChat() {
  $.ajax({
    type: "GET",
    url: "refresh.php?lastTimeID=" + lastTimeID
  }).done( function( data )
  {
    var jsonData = JSON.parse(data);
    var jsonLength = jsonData.results.length;
    var html = "";
    for (var i = 0; i < jsonLength; i++) {
      var result = jsonData.results[i];
      html += '<span class="color-'+result.color+'"><b>'+result.usrname+'</b></span> <i class="fa fa-angle-right"></i> '+result.chattext+'<br>';

      lastTimeID = result.id;     
    }
    $('#page-content').append(html);

    if(html!="")
    {   
     // Here i need to check if the scroll position is in the bottom or in the last 10%
     //then this to scroll to the top bottom (25000 is height limit)
     $('.page-content').scrollTop(25000);
    }

  }); }

【问题讨论】：

请添加您的 html 消息。还有你的消息附加脚本
stackoverflow.com/questions/20892217/… 我认为正是你所需要的
我已经附加了我的函数来获取新消息，我只是把 25000 作为一个非常大的数字放在那里，我永远不会到达那个位置因为我已经设置了 X 条消息的限制，这样我不需要检查“页面内容”高度

标签： javascript jquery

【解决方案1】：

诀窍在于，在您的消息容器内（在您的情况下为 #page-content DIV），您可以设置一个不可见的占位符 div，并在其上设置一些 id。

在this demo JSFiddle 中，当您点击锚点.addItem 时，将新项目添加到容器后，占位符 div 将移动到容器的末尾。这确保同时单击.addItem 会看到容器DIV 的底部（因为它在其href 属性中引用占位符的id)。

function scrollToBottom(container) {
    // get all the child elements of the container
    var children = container.children('.item');

    // move the placeholder to the end of the container
    $('#contentBottom').insertAfter(children.eq(children.length - 1));
}

更新

为了确定您当前的滚动位置，您应该收听container 中的scroll 事件。同时，您应该考虑到新消息到达时container 的更新高度值。

查看this updated fiddle，我在其中检查当前滚动位置是否超出顶部的 60 %，以便轻松查看效果。

注意：如果在您不滚动时出现新消息，您只需在将其附加到container.

【讨论】：

了解，但我要检查的是，当我在 div 顶部“阅读”旧消息时，当我收到新消息时不需要向下滚动...只要滚动我正在“等待” div 向下滚动的新消息……就像那里的每个聊天一样：P

【解决方案2】：

将页面滚动到DIV 的底部有一个技巧，我尝试在此fiddle 中实现它。

看到$(window).height()+$(window).scrollTop() 将始终等于窗口子级的总高度（包括填充、边距），在我们的例子中它等于$('#page-content').height()+margin/padding。

CSS：

div#page-content {
  height:600px;
  border:solid 1px red;
}

在我们的情况下：

$(window).height()+$(window).scrollTop()=$('#page-content').height()+(margin/padding)=600px

所以每当我们scroll 它时，我们可以将scroll() 事件附加到div 并轻松检查我们是否处于“#page-content”的最后 10% 或更少的顶部底部高度

$(window).on('scroll',function(){

   if($(window).height()+$(window).scrollTop()>=($('#page-content').height()*(.9))){
     $(window).scrollTop($('#page-content').height()-$(window).height())
   }
})

祝你好运。

【讨论】：

嗨，使用您的代码，我的滚动条被锁定到底部：P，我无法向上滚动
其实可以的，努力吧
感谢您的帮助，但不，我无法在代码中向上滚动，可能是因为我没有设置高度（因为它是动态的），只是没有 CSS 参数的空白 div...我已将我的函数附加到应该发生的地方，请看一下我如何在那里实施您的解决方案，再次感谢

【解决方案3】：

由于我没有做这个，我不想为此而受到赞扬。

有一个 jQuery 插件可以让任何有滚动条的东西滚动到特定位置或元素。由于您想滚动到动态 div，您可以在创建 div 后调用它，它会滚动到该位置。

你可以通过here.找到插件

您可以通过here. 找到该插件的演示

希望这就是你要找的。p>

-W

【讨论】：