每当某个css类的内容块在5秒内可见(这是用户正在阅读内容的标志)时,我需要推送一个数据层事件。
我已经使用了类似这样的东西:
$(window).on(‘scroll resize’, function() {
$(‘.myClass’).each(function(element) {
If (isInViewport(element)) {
setTimeout(function() {
if (isInViewport(element)) {
... // Push the data layer event.
}
}, 5000);
}
});
});
function isInViewport(element) {
... // Returns true if element is visible.
};
这是我凭记忆写的,所以它可能不是100%正确的,但要点是我试着:
问题是,当setTimeout运行isInViewport时,元素是未定义的。也许jQuery的.each和setTimeout是不匹配的?
发布于 2018-08-02 14:25:02
我使用jquery-visible plugin实现了一个脚本,该脚本将输出自查看特定元素以来的时间(以秒为单位)。输出使用X秒的间隔...退出滚动处理程序。
在停止滚动时,我们检查所有受监视的元素,以了解它们是否在视口中。
如果一个元素是,我们检查它是否已经在上一次滚动停止时记录在visible_begins
数组中。如果不是,我们推送一个包含其id
和以毫秒为单位的实际时间的对象。
在滚动停止时,如果某个元素不在视口中,我们将检查它是否记录在visible_begins
中,如果是,则将其删除。
现在,每隔X秒(您选择的时间间隔),我们检查所有被监视的元素,并且每个仍然在视口中的元素都被输出与现在的时间差。
console.clear();
var scrolling = false;
var scrolling_timeout;
var reading_check_interval;
var reading_check_delay = 5; // seconds
var completePartial = false; // "true" to include partially in viewport
var monitored_elements = $(".target");
var visible_begins = [];
// Scroll handler
$(window).on("scroll",function(){
if(!scrolling){
console.log("User started scrolling.");
}
scrolling = true;
clearTimeout(scrolling_timeout);
scrolling_timeout = setTimeout(function(){
scrolling = false;
console.log("User stopped scrolling.");
// User stopped scrolling, check all element for visibility
monitored_elements.each(function(){
if($(this).visible(completePartial)){
console.log(this.id+" is in view.");
// Check if it's already logged in the visible_begins array
var found = false;
for(i=0;i<visible_begins.length;i++){
if(visible_begins[i].id == this.id){
found = true;
}
}
if(!found){
// Push an object with the visible element id and the actual time
visible_begins.push({id:this.id,time:new Date().getTime()});
}
}
});
},200); // scrolling delay, 200ms is good.
}); // End on scroll handler
// visibility check interval
reading_check_interval = setInterval(function(){
monitored_elements.each(function(){
if($(this).visible(completePartial)){
// The element is visible
// Check all object in the array to fing this.id
for(i=0;i<visible_begins.length;i++){
if(visible_begins[i].id == this.id){
var now = new Date().getTime();
var readTime = ((now-visible_begins[i].time)/1000).toFixed(1);
console.log(visible_begins[i].id+" is in view since "+readTime+" seconds.")
}
}
}else{
// The element is not visible
// Remove it from thevisible_begins array if it's there
for(i=0;i<visible_begins.length;i++){
if(visible_begins[i].id == this.id){
visible_begins.splice(i,1);
console.log(this.id+" was removed from the array.");
}
}
}
});
},reading_check_delay*1000); // End interval
.target{
height:400px;
border-bottom:2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<div id="one" class="target">1</div>
<div id="two" class="target">2</div>
<div id="three" class="target">3</div>
<div id="four" class="target">4</div>
<div id="five" class="target">5</div>
<div id="six" class="target">6</div>
<div id="seven" class="target">7</div>
<div id="eight" class="target">8</div>
<div id="nine" class="target">9</div>
<div id="ten" class="target">10</div>
请在整页模式下运行代码段,因为有几个控制台日志。
发布于 2018-08-02 10:34:52
您可以使用此函数检查某个元素是否在视口中(来自this answer):
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
<input id="inViewport"/>
<span style="margin-left: 9999px;" id="notInViewport">s</span>
<script>
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
console.log("#inViewport in viewport: "+isElementInViewport(document.getElementById("inViewport")));
console.log("#notInViewport in viewport: "+isElementInViewport(document.getElementById("notInViewport")));
</script>
发布于 2018-08-02 08:32:30
您可以尝试使用Waypoints,它是一个允许您确定元素何时进入或离开视口的库。向它传递一个接受方向参数的事件处理程序。方向告诉您被跟踪的元素是进入还是退出屏幕。一旦您检测到元素已经进入屏幕,然后启动计时器。如果您没有看到元素何时退出视口的事件,那么您就知道它已经在屏幕上显示了一段时间。
https://stackoverflow.com/questions/51643290
复制相似问题