当用户到达页面中的特定点时如何打印内容？ （不依赖于任何类或 ID 元素）

Posted 2023-05-07

【中文标题】当用户到达页面中的特定点时如何打印内容？ （不依赖于任何类或 ID 元素）

【英文标题】：How to print something when the user reaches a specific point in the page? (not dependant on any class or ID element)

【发布时间】：2021-04-13 17:11:24

【问题描述】：

当用户到达页面中的某个点时，我想在控制台日志中打印一些内容。无论页面的类或ID如何，我都希望它出现在它到达特定点并且不重复时，特别是如果用户向上并再次向下滚动时不要重复。

在这个例子中，如果我使用$this.scrollTop() > 400 它确实有效，但控制台会不断重复该消息。所以我想改用==，但它不起作用。

为什么？我怎样才能把它排序？这可以用vanilla JS来实现吗？

$(window).scroll(function () 
    var $this = $(this),
        $head = $('#head');
    if ($this.scrollTop() == 400) 
       console.log('You've reached 400 already');
    
);

【参考方案1】：

使用> 与==（或===）对您尝试实现的“仅一次”逻辑没有影响。然而，使用> 可能更安全，因为浏览器可能不会在滚动时报告每一个像素的变化。您缺少的是某种状态：跟踪之前是否进行过比较。

如果您只想比较单个滚动位置，那么我们可以简单地将用户是否滚动过该点存储在一个变量中并检查它，这样我们就不会多次登录控制台：

var hasPassedPoint = false;

$(window).scroll(function() 
  var $this = $(this);

  if ($this.scrollTop() > 400 && !hasPassedPoint) 
    console.log('You\'ve reached 400 already');
    hasPassedPoint = true;
  
);

p 
  margin-bottom: 200px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>

如果您想比较 多个 滚动位置，将这些状态/检查点存储在一个对象中可能更有意义：

var passedCheckpoints = ;
var checkpoints = [150, 400, 550];

$(window).scroll(function() 
  var $this = $(this);

  checkpoints.forEach(x => 
    if ($this.scrollTop() > x && !passedCheckpoints[x]) 
      console.log(`You've reached $x already`);
      passedCheckpoints[x] = true;
    
  );
);

p 
  margin-bottom: 200px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>
<p>Keep scrolling down</p>

【讨论】：

出色而清晰的解释@Terry，谢谢！！