具有visible()的jQuery视口

时间:2018-07-24 11:36:58

标签: jquery viewport

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

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

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

1 个答案:

答案 0 :(得分: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');
                }
            });
        }
    }
});