1
我有一些应该在用户滚动后出现的div。所以我跟踪mouseScroll
事件。但我想为我的活动增加一些延迟。我试图使用setTimeout
,但它并没有帮助...如果我做了一个完整的滚动滚动(每个行为多于一个),除了删除我的课程.shown
之外,我什么也得不到。我该怎么办?这里是我的代码:向DOMMouseScroll事件添加延迟
$(document).ready(function() {
var timer;
var delay = 1000;
$(window).bind('mousewheel DOMMouseScroll', function(event) {
var shown = $(".shown").removeClass('shown');
timer = setTimeout(function() {
if (event.originalEvent.wheelDelta > 14 || event.originalEvent.detail < 14) {
// scroll up
if (shown.next() && shown.next().length) {
shown.next().addClass('shown');
} else {
shown.siblings(":first").addClass('shown');
}
} else {
// scroll down
if (shown.next() && shown.next().length) {
shown.next().addClass('shown');
} else {
shown.siblings(":first").addClass('shown');
}
}
}, delay);
}, function() {
clearTimeout(timer);
});
});
.view {
width: 300px;
height: 20px;
display: none;
clear: both;
transition: opacity 1s ease-out;
opacity: 0;
}
#first {
background: grey;
}
#second {
background: red;
}
#third {
background: blue;
}
#fourth {
background: orange;
}
#fifth {
background: green;
}
.view.shown {
display: block;
opacity: 1;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="view shown" id="first"></div>
<div class="view" id="second"></div>
<div class="view" id="third"></div>
<div class="view" id="fourth"></div>
<div class="view" id="fifth"></div>
不幸的是,我不知道,也,如何扭转这个脚本相同的延迟。任何帮助将不胜感激!
它的工作原理,但并不像预期 - 如果你做一个“大”长卷,系统craches。我需要更改“大”滚动...我该怎么做错了?... – Varg
这是什么意思“大”滚动?请显示代码上下文。这可能是崩溃的另一个原因,不是因为滚动。 –
系统跟踪事件“滚动”,但当我做另一个时,它删除类“显示”,没有增加。这段代码有助于一对一滚动,真的有用。但为了改善它,我必须做很多事情。 [Fulpage.js](https://www.google.com.ua/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwj-yf_E9Z3LAhWrC5oKHc6kCBcQFggaMAA&url=http%3A%2F%2Falvarotrigo。 com%2FfullPage%2F&usg = AFQjCNETe6ZqOIznFqASVcshwcCM10-Tmg&sig2 = Rn_My6Km7U-v1vdrE1WfPQ&bvm = bv.115339255,d.bGs)解决了我的问题,我想说“谢谢”您的帮助! – Varg