jQuery视口中的visible（）

我有一个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');
                }
            });
        }
    }
});

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

---

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

如果您使用的是

jquery-visible

插件，则它具有在部分可见性时触发的选项-

。visible（true）

-docs at

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