How can I disable mousewheel after last slide and reenable it when reaches top of page?

Question

I am trying to disable mousewheel on last slide and scroll down to pages when reached end of flexslider. Issue here is that I am not able to use mousewheel again when reached back to top of page. I am using fullpage flexslider at top of page. Here is the js code below:

$(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");
            }
        });
      }
    });
  });

Answer 1

Try the following code, in the revised JavaScript code, I optimized the handling of the mousewheel event in relation to the FlexSlider. Initially, I disable the mousewheel on the FlexSlider when the last slide is reached by using e.preventDefault() within the end callback of the FlexSlider. To track if the user has scrolled down after reaching the last slide, I introduced a windowScrolled flag and then re-enable the mousewheel event when the user scrolls back to the top of the page, ensuring smooth and intuitive navigation both within the FlexSlider and on the overall page.

$(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;
        }
    });
});