Question

每当某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％正确，但要点是我试图做到：

测试滚动/调整大小上每个myClass元素的可见性
如果可见，请等待5秒钟，然后再次检查同一元素。

问题是，当setTimeout运行isInViewport时，元素未定义。也许jQuery的.each和setTimeout不匹配？

Answer 1

您可以使用此功能检查元素是否在视口中（来自this答案）：

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>

Answer 2

我使用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>

由于有几个控制台日志，请以全页模式运行代码段。

CodePen

Answer 3

您可以尝试使用Waypoints，它是一个库，可让您确定元素何时进入或离开该视口。您向其传递一个接受Direction参数的事件处理程序。该方向告诉您被跟踪元素是进入还是退出了屏幕。一旦检测到元素已进入屏幕，然后启动计时器。如果没有看到元素退出视口的事件，那么您知道该元素在该时间段内一直在屏幕上显示。

JavaScript –检测元素是否在视口中停留n秒

3 个答案: