如何解决当用户到达页面中的特定点时如何打印某些内容? 不依赖于任何类或 ID 元素
当用户到达页面中的某个点时,我想在控制台日志中打印一些内容。我希望它在不考虑页面的类或 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');
}
});
解决方法
使用 >
与 ==
(或 ===
)对您尝试实现的“仅一次”逻辑没有影响。但是,使用 >
可能更安全,因为浏览器在滚动时可能不会报告每个像素的变化。您缺少的是某种状态:它会跟踪之前是否进行过比较。
如果您只想比较单个滚动位置,那么我们可以简单地将用户是否滚动超过该点存储在一个变量中并检查它,因此我们不会多次登录控制台:
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。