仅执行一次滚动事件

Question

我在尝试在 1500 像素后滚动时将 css 添加到弹出覆盖类时遇到问题，但只有一次。任何帮助将不胜感激。

jQuery(window).on("scroll", function(event) {
if (jQuery(this).scrollTop() > 1500) {
jQuery('.popbox-overlay').css('display', 'block');
jQuery(window).scrollTop(0);
};
jQuery(this).off(event);
});

Answer 1

您只需要将off()调用移动到 if 条件中即可。 下面修改后的逻辑使用命名函数在窗口上创建滚动事件侦听器。 它还缓存$(window)，因此仅创建一次。 然后在逻辑中，当显示覆盖时，它会通过使用该方法执行off()来删除该事件侦听器。 这样，只会删除该事件侦听器。 您可以简单地off('scroll')，但这可能会删除比您预期的更多的事件侦听器。

我还为覆盖添加了一个单击事件侦听器，以便您可以单击它以使其再次隐藏，并在滚动到底部时看到它不会再次显示。

(function($, window, undefined){
let $popboxOverlay = $('.popbox-overlay').on('click', function(e){
$popboxOverlay.hide();
});
let $window = $(window).on('scroll', function showPopboxOverlay(e){
if ($window.scrollTop() > 1500) {
$popboxOverlay.show();
$window.scrollTop(0);
$window.off('scroll', showPopboxOverlay);
}
});
}(jQuery, window));

body {
min-height: 2000px;
}
.popbox-overlay {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;

background-color: rgb(64, 64, 192);
color: white;

display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Stuff</span>
<div class="popbox-overlay">
Other Stuff
</div>

Answer 2

试试这个。

jQuery(window).on("scroll", function(event) {
if (jQuery(this).scrollTop() > 1500) {
jQuery('.popbox-overlay').css('display', 'block');
jQuery(window).scrollTop(0);
};
jQuery(window).off("scroll")
});

Answer 3

解决此问题的最佳方法是使用交叉观察器 (IO(。这是为像您这样的用例而设计的：它监视一个元素并在它进入视口(或离开视口(时触发一个函数。它甚至支持检查一个元素是否与另一个元素相交。

首先，您必须设置 IO 选项并对其进行初始化：

let options = {
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);
let targets = document.querySelectorAll('popbox-overlay'); // get each popbox-overlay
targets.forEach(target => { // for each overlay
observer.observe(target); // we observe it
});
// the callback we setup for the observer will be executed now for the first time
// it waits until we assign a target to our observer (even if the target is currently not visible)

最后一步是定义元素进入视图后实际应该发生的情况：

let callback = (entries, observer) => {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
//   entry.boundingClientRect
//   Your popbox-overlay is in the viewport, do something with it
});
};

如果您只需要触发一次元素，也可以取消观察元素。

来自 w3c 的 polyfill 存在以支持不支持此功能的旧浏览器 (IE 11(。

Answer 4

你可以使用纯javascript第一次检查

var firstScrolled = false;
window.onscroll = function(){

if(!firstScrolled)
{
// some code
firstScrolled = true;
}
};