Question

我需要查看用户是否看过帖子，并根据他没有看过多少帖子来更改文档标题。

例如标题包含2个看不见的帖子：“（2） - 帖子＃123”，或者没有看不见的帖子：“帖子＃123”。

我已经研究了几个“滚动到视图”的jQuery插件，但我没有找到一个好的快速解决方案，用ajaxed内容做这个（帖子附加到div，它检查新的每一个5秒）。

因此，例如markdown：

<div id="posts">
 <div class="reply" data-postid="1" data-seen="no">
 Post 1
 </div>
 <div class="reply" data-postid="2" data-seen="no">
 Post 2
 </div>
 <div class="reply" data-postid="3" data-seen="no">
 Post 3
 </div>
</div>

我猜测使用“看到”的属性会很有用。现在我如何检查用户是否已经看过（帖子已经在屏幕上滚动）并将未看到的内容存储在字符串中以用于标题？

有用信息：附加的div通过 xhr 获得，它们作为另一个文件的主体“导入”或用xhr附加到#posts。为获得新帖子每5秒重复一次的函数名称为PostData()。

编辑：我正在尝试这个，但它不起作用：

function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

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

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(window).scroll(function(){
    isScrolledIntoView(".reply[data-seen='no']", function(){
        if ($(this) == true){
            $(this).attr("data-seen", "yes");
        }
    });
});

更新的工作代码（对于旁路者）：

function lescroll(){
        var amount = "0";
        $('.reply[data-seen="no"]').each(function(){
            amount++;
            if ( isScrolledIntoView(this) ) {
                $(this).attr("data-seen", "yes");
                amount--;
            };
        });
        document.title = "(" + amount + ") pagetitle";
        if (amount == 0){
            document.title = ">><?php echo($pageid); ?> - <?php echo($leboardname); ?> vikingchan";
        }
        setTimeout(lescroll, 5000); /* make it check while you are in another tab */
    }

$(window).scroll(function(){
    lescroll();
});
$(document).ready(function(){
    lescroll();
});

Answer 1

要使代码运行所有元素，请将滚动回调更改为

$(window).scroll(function(){
    $('.reply[data-seen="no"]').each(function(){
        if ( isScrolledIntoView(this) ) {
            $(this).attr("data-seen", "yes");
        };
    });
});

但请记住，它可能有点重，因为在滚动时会多次触发滚动。您可能需要debounce the scroll event。

Answer 2

尝试

$(window).on("scroll", function (e) {
    var title = function() {
    document.title = $("[data-seen=yes]").length === $(".reply").length
                     ? "Post#123" 
                     : "(" + $("[data-seen=no]").length + ")" + " - Post#123";
        return document.title
    };
    // console.log(document.title);
    $(".reply").each(function (i, el) {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
            el.dataset.seen = "yes";
            title();
        } else {
            el.dataset.seen = "no";
            title();
        };
    });
    try {
      if (window.innerHeight + window.scrollY >= 
         Number($("[data-seen=yes]").css("height").replace(/px/, ""))) {

          $("[data-seen=yes]").next().data("seen", "yes");
          title();
          // console.log($("[data-seen=no]").length
          //               , $("[data-seen=yes]").length)
      }
    } catch (e) {
      console.log(e)
    };

}).trigger("scroll");

jsfiddle http://jsfiddle.net/guest271314/nqbbLuyL/

检查看不见的帖子并更新标题

2 个答案: