我有这个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');
}
});
}
}
});
问题是,当消息大于视口时,它将不会被设置为已读,则整个消息必须在视口内。
当用户在较小的屏幕中通过视口滚动消息时,如何将其设置为已读。
答案 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');
}
});
}
}
});