当用户到达页面中的特定点时如何打印一些东西？（不依赖于任何 class 或 ID 元素）

Question

我想在用户到达页面中的某个点时在控制台日志中打印一些内容。我希望它出现而不管页面的类或 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');
    }
});

Answer 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>

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

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>

当用户到达页面中的特定点时如何打印一些东西？（不依赖于任何 class 或 ID 元素）

How to print something when the user reaches a specific point in the page? (not dependant on any class or ID element)

jquery

scroll

scrolltop

当用户到达页面中的特定点时如何打印一些东西？ （不依赖于任何 class 或 ID 元素）

How to print something when the user reaches a specific point in the page? (not dependant on any class or ID element)

jquery

scroll

scrolltop

当用户到达页面中的特定点时如何打印一些东西？（不依赖于任何 class 或 ID 元素）