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');
                }
            });
        }
    }
});

具有visible（）的jQuery视口

1 个答案: