jQuery 视口可见（）

Question

我有这个 jQuery 代码，当文档具有焦点并且消息在视口中时，将消息设置为已读：

$('.message').each(function() {
    var the_message = $(this);
    var message_id = $(this).data('id');
    if ($(this).hasClass('message-not-read')) {
        if ($('#message-' + message_id).visible() && document.hasFocus()) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    the_message.removeClass('message-not-read');
                }
            });
        }
    }
});

问题是当消息大于视口时，它不会被设置为已读，整个消息必须在视口内。

当用户在较小屏幕的视口中滚动消息时，如何将其设置为已读。

Answer 1

如果您使用的是 jquery-visible 插件，它可以选择触发部分可见性 - .visible( true ) - https://github.com/customd/jquery-visible

上的文档

$('.message').each(function() {
    var the_message = $(this);
    var message_id = $(this).data('id');
    if ($(this).hasClass('message-not-read')) {
        if ($('#message-' + message_id).visible( true ) && document.hasFocus()) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    the_message.removeClass('message-not-read');
                }
            });
        }
    }
});

jQuery 视口可见（）

jQuery viewport with visible()

jquery

viewport