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

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 中的代码。还有 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 显示隐藏在滚动条下方的消息数？

How to show count for messages which are hidden below the scroll using jQuery?

javascript

jquery

scrollview