检查未查看的帖子并更新标题

Check for unseen posts and update title

本文关键字：更新 标题 检查      更新时间：2023-09-26

我需要检查用户是否看到了帖子，并根据他没有看到的帖子数量更改文档标题。

例如，有两个未公开帖子的标题："（2）-帖子#123"，或者没有未公开帖子："帖子#123。

我已经研究了几个"滚动到视图"的jQuery插件，但我还没有找到一个好的、快速的解决方案来处理ajaxed内容（帖子被附加到div中，它每5秒检查一次新的）。

例如，这是降价：

<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>

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

有用的信息：附加的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();
});

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

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

但请记住，它可能有点重，因为滚动时会多次触发滚动。您可能希望取消对scroll事件的反弹。

尝试

$(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");

jsfiddlehttp://jsfiddle.net/guest271314/nqbbLuyL/

相关文章：