我在我的网站主页上使用了fullpage.js,我制作了它,使它每10秒自动滚动一次。
我使用了如下功能:
$( '#fullpage' ).fullpage({
continuousVertical: true,
loopHorizontal: false,
resize: false,
afterRender: function() { // so that it applies to first section too
forceScroll();
}
});
slideTimeout = setInterval( function() {
$.fn.fullpage.moveSectionDown();
}, 10000);
function forceScroll() {
var slideTimeout;
}
但是,当用户使用鼠标向下或横向滑动时,我想使用clearInterval(slideTimeout)
,就像我想在之后浏览时,它一直上下移动.这真的很烦人。
但我似乎找不到触发它,或任何真正的解决办法!
我怎么能做到这一点?
提前谢谢你,
菲利佩
发布于 2015-09-28 11:11:05
如果我理解为true,则希望在用户滚动时解除对间隔的绑定。
$('body').on('mousewheel', function(e) {
if (e.originalEvent.wheelDelta > 0) {
if (typeof slideTimeout !== "undefined") {
clearInterval(slideTimeout); //case for scroll up
alert("Timeout clear");
}
} else {
if (typeof slideTimeout !== "undefined") {
clearInterval(slideTimeout); //case for scroll down
alert("Timeout clear");
}
}
});
下面是系统的一个示例版本
var slideInterval = setInterval(function() {
$("#counter").text(parseInt($("#counter").text()) + 1);
}, 1000);
$('body').on('mousewheel', function(e) {
if (e.originalEvent.wheelDelta > 0) {
clearInterval(slideInterval);
alert("Timeout clear");
} else {
clearInterval(slideInterval);
alert("Timeout clear");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter" style="height:6000px;">0</div>
发布于 2015-09-29 01:09:51
恐怕fullpage.js没有为鼠标轮/trackpad事件提供任何回调。
正如@Ahmet Can Güven所指出的那样,你必须自己去做。但我建议您寻找一种更加跨浏览器的解决方案,mousewheel
并不能在所有浏览器中工作。
https://stackoverflow.com/questions/32828785
复制相似问题