CODEWITHSUNDEEP
jqueryscrollmousewheel
JCHASE11
JCHASE11

Reputation: 3941

Temporarily disable scrolling with mousewheel.js

I have a horizontally scrolling website. Iam using mousewheel.js to scroll horizontally with the mousewheel (or up and down). I am using a snippet from CSS Tricks like so:

$("body").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 5);
      event.preventDefault();
   });

As I scroll down, the browser interprets it as a right scroll. This works great.

I need to be able to temporarily disable this behavior. For instance, I have panel that overlays the site with a gallery. While that panel is open, I want to disable the scrolling like so:

$("a.gal").on("click", function(){
    $("#galPanel").addClass("open");
    $("body").mousewheel(function(event, delta) {
        event.preventDefault();
    });
});

When we exit the panel, I want to reinitiate the mousewheel plugin.

Any idea how I can accomplish this?

UPDATE: I found a working solution, but am unsure if this is the best way of going about it:

$("#galPanel").bind("mousewheel", function() {
       return false;
 });

Upvotes: 2

Views: 9294

Answers (2)

Praveen
Praveen

Reputation: 56501

As you already used .on(), go with .on() and .off() for mousewheel event.

$("body").on('mousewheel', function(){
// ToDos
});

$("a.gal").on("click", function(){
    $("#galPanel").addClass("open");
    $("body").off('mousewheel', false);
});

I'm not sure how to get it working in your code. But this simple, like switch (ON and OFF).

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

May be this will help: You can use .on()

$('#galPanel').on('mousewheel', function(event, delta){
        event.preventDefault(); // Or return false
});

Upvotes: 1

Related Questions