Disable Scrolling Function

Question

I have a light box on my page. I would like to disable the following function when the light box is opened and enable it again when the light box is closed.

Here is the code for the function:

$.fn.fullpage.setMouseWheelScrolling = function (value){
        if(value){
            addMouseWheelHandler();
        }else{
            removeMouseWheelHandler();
        }
};

HTML for the light box:

<div>
    <a class="example_open" href="#example">View Popup</a>
</div> 
<div id="example" class="popup"> 
    <div class="content">abc</div> 
    <button class="example_close"></button> 
</div>

I'm using this plugin for the light box

How can I disable / enable the function based on the light box being visible?

Include the html for your lightbox and which lightbox plugin you are using — dehrg, Sep 03 '14 at 14:59
possible duplicate of [How to disable scrolling temporarily?](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) — Edi G., Sep 03 '14 at 15:04
Here is the code:
View Popup

abc

And the following plugin: http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/ — Umer Saeed, Sep 03 '14 at 15:07
For next time, include that code and the plugin in the question itself. You can edit your question after you have posted it — dehrg, Sep 03 '14 at 15:40

score 0 · Answer 1 · answered Sep 03 '14 at 15:03

If you mean disabling scrolling for whole page so try this:

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
})

And in order to restore to default state:

$('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
})

Check JSFiddle Demo

dehrg · Answer 2 · 2014-09-03T17:59:31.260

0

The plugin you are using has javascript events which you can tap into. You can use them to set a variable, and then check for that variable in your scrolling function.

$(document).ready(function() {

    var isOpen;

    $('#my_popup').popup({
       onopen: function() {
           isOpen = true;
       },
       onclose: function() {
           isOpen = false;
       }
    });

    $.fn.fullpage.setMouseWheelScrolling = function (value){
       if ( ! isOpen ) {
           if(value){
               addMouseWheelHandler();
           }else{
               removeMouseWheelHandler();
           }
       }
    };
});

edited Sep 03 '14 at 17:59

answered Sep 03 '14 at 15:38

dehrg

1,721
14
17

There is some syntax error in line no 7 onclose: function() – Umer Saeed Sep 03 '14 at 17:41
Missed a comma, revised my answer – dehrg Sep 03 '14 at 17:59
It's not working. Let me give you the project link. Can you please mention your email ID? – Umer Saeed Sep 03 '14 at 18:21
If you include the javascript you have tried so far in your question I may be able to help. It is expected that all questions contain a [Short, Self Contained, Correct (Compilable), Example](http://sscce.org/) – dehrg Sep 03 '14 at 18:51

score 0 · Answer 3 · answered Sep 03 '14 at 15:39

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
}


you can check the demo also

http://jsbin.com/disable-scrolling/1

Disable Scrolling Function

3 Answers3