更新

Question

我有div个ID＆＃34;页面内容＆＃34;，它没有高度或宽度，它只有一个空白div。

我正在动态地填充div内容，因此div高度不断增长，我正在聊天，我想要检测我是否在div的底部或div总高度的最后10％，如果为true，则滚动到底部

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

我要做的是，检查你是否处于"#page-content" div的最后10％或更低的最高点（不是在我阅读＆＃34;旧消息＆＃34;在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);
    }

  }); }

Answer 1

将页面滚动到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，并轻松检查我们是否处于“＃”的最后10％或更低的最高位置页内容“

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

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

祝你好运。

Answer 2

由于我没有这样做，我不想因此而受到赞誉。

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

您可以在here.

上找到该插件

您可以在here.

上找到该插件的演示

希望这就是你要找的东西。

-W

Answer 3

诀窍在于您的邮件容器内（在您的情况下为#page-content DIV），您可以拥有一个隐藏的占位符div，并设置了一些id。< / p>

在this demo JSFiddle中，当您点击锚.addItem时，在新项目添加到容器后，将占位符div移动到容器的末尾 。这可以确保同时点击.addItem将容器DIV的底部带入视图（，因为它引用了id中占位符的href {1}}属性）。

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));
}

更新

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

查看this updated fiddle我正在检查当前滚动位置是否从顶部超过60％，以便轻松查看效果。

注意： 如果您不滚动时出现新消息，则可以在附加的相同功能/代码块中执行$('.container').scrollTop(25000)到container。

滚动到动态Div的底部

3 个答案:

更新