Question

我需要显示已加载的计数器，但在对话屏幕中向下滚动消息。假设总共有15条消息，但现在只在浏览器上显示6条消息。这意味着下面隐藏了9条消息，因此计数器应显示9.但是当我向上或向下滚动计数器时，应相应地更改可见和隐藏消息的值。

        function isScrolledIntoView(elem) {
         var $elem = $(elem);
        var $window = $(window);

        var docViewTop = $window.scrollTop();
            var docViewBottom = docViewTop + $window.height();

            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();

        return ((elemBottom <= docViewBottom) && (elemTop >=        docViewTop));
        }
            var message = $('#messages');
            $(window).scroll(function() {
        if (isScrolledIntoView('#hiddenElem')) {
      message.text("Visible");
        } else {
      message.text("Invisible");
    }
  });

检查this JS Fiddle中的代码。此外，还为show hidden或visible元素编写了JavaScript代码。

Answer 1

您必须将每条消息的位置与滚动值进行比较所以你需要循环使用它们。

这是有效的方法：

var messages=$(".msg");

$(window).scroll(function(){
  var counter=0;
  for(i=0;i<messages.length;i++){
    if( messages.eq(i).offset().top < $(window).scrollTop() ){
      counter++;
    }
  }
  // Display result.
  $("#messages").html(counter);
});

Updated Fiddle

如何使用jQuery显示隐藏在滚动下方的消息的计数？

1 个答案: