Question

我的页面上有一个灯箱。我想在灯箱打开时禁用以下功能，并在灯箱关闭时再次启用它。

以下是该函数的代码：

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

灯箱的HTML：

<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>

我正在使用this plugin for the light box

如何根据灯箱可见来禁用/启用此功能？

Answer 1

如果您的意思是禁用整页滚动，请尝试以下操作：

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

并且为了恢复到默认状态：

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

<强> Check JSFiddle Demo

Answer 2

您使用的插件包含可以使用的javascript事件。您可以使用它们来设置变量，然后在滚动功能中检查该变量。

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

Answer 3

// 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

禁用滚动功能

3 个答案: