我试图在最后一张幻灯片上禁用鼠标滚轮,并在到达 FlexSlider 末尾时向下滚动到页面。这里的问题是,当我回到页面顶部时,我无法再次使用鼠标滚轮。 我在页面顶部使用全页 Flexslider。 下面是js代码:
$(document).ready(function() {
$('#flexslider').flexslider({
animation: "slide",
useCSS: false,
controlNav: false,
directionNav: false,
slideshow: false,
mousewheel: true,
animationLoop: false,
touch:true,
end: function(slider){
$('#flexslider').unmousewheel();
$(window).scroll(function (fn) {
if ($(this).scrollTop() <= 0 ){
console.log('reached top');
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
}
});
}
});
});
尝试下面的代码,在修改后的JavaScript代码中,我优化了与
FlexSlider
相关的鼠标滚轮事件的处理。最初,当到达最后一张幻灯片时,我通过在 FlexSlider 的结束回调中使用 e.preventDefault()
禁用 FlexSlider 上的鼠标滚轮。为了跟踪用户在到达最后一张幻灯片后是否向下滚动,我引入了一个 windowScrolled
标志,然后在用户滚动回页面顶部时重新启用 mousewheel
事件,确保在页面内平滑直观的导航FlexSlider
以及整个页面。
$(document).ready(function() {
var flexslider = $('#flexslider');
var windowScrolled = false;
flexslider.flexslider({
animation: "slide",
useCSS: false,
controlNav: false,
directionNav: false,
slideshow: false,
mousewheel: true,
animationLoop: false,
touch:true,
end: function(slider) {
flexslider.on('mousewheel', function(e) {
e.preventDefault();
});
windowScrolled = true;
}
});
$(window).scroll(function() {
if (windowScrolled && $(this).scrollTop() <= 0) {
console.log('reached top');
flexslider.off('mousewheel');
windowScrolled = false;
}
});
});