滚动到动态div的底部

Question

滚动到动态div的底部

javascriptjquery

3

我有一个id为“page-content”的

，它没有高度或宽度，只有一个空的

。

我正在动态地向该

中填充内容，因此

的高度不断增长。我正在制作聊天功能，并希望检测是否在

底部或在

总高度的最后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开头阅读“旧消息”时），我有一个函数可以附加新消息，但需要手动向下滚动才能看到新消息...所以我想自动滚动到新底部，以便我可以看到新消息 :)

更新：

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

  }); }

- xnanitox

1

请添加您的HTML消息。同时附上您的脚本。 - Noman

1

我认为这正是你所需要的：http://stackoverflow.com/questions/20892217/jquery-scrolltop-not-scrolling-to-last-child - Bisk

我已经附上了获取新消息的函数，我只是将25000作为一个非常大的数字放在那里，因为我已经设置了X条消息的限制，这样我就不需要检查“页面内容”高度。 - xnanitox

3个回答

0

在滚动页面到底部的时候，有一个小技巧，我试着在这个 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()事件附加到div上，并轻松检查我们是否在"#page-content"的最后10％或更少的顶部底部高度中。

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

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

祝你好运。

- Siddharth

嗨，使用你的代码后，我的滚动条被锁定在底部:P，我无法向上滚动。 - xnanitox

其实你是可以的，努力去尝试。 - Siddharth

1

谢谢你的帮助，但是不行，我无法在我的代码中向上滚动，可能是因为我没有设置高度（因为它是动态的），只是一个没有CSS参数的空div......我已经附上了应该发生的所有事情的函数，请看一看如何在那里实现你的解决方案，再次感谢 - xnanitox

0

由于这不是我制作的，我不想要取得这个的功劳。

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

您可以在此处找到插件here.

您可以在此处找到插件演示here.

希望这就是您要寻找的。

-W

- wouter140

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmad Baktash Hayeri · Accepted Answer

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

在这个演示JSFiddle中，当你点击锚点.addItem后，新项目被添加到容器中，占位符div被移动到容器的末尾。这同时确保了点击.addItem会将容器DIV的底部显示出来（因为它引用了占位符的id在它的href属性中）。

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事件。同时，在新消息到达时，您应该考虑容器的更新高度值。

请查看此更新版 fiddle，其中我正在检查当前滚动位置是否超过距顶部60%以轻松查看效果。

注意：如果在您不滚动时收到一条新消息，则可以在将其附加到容器的同一函数/代码块中简单地执行$('.container').scrollTop(25000)。