禁用滚动功能

Disable Scrolling Function

本文关键字：功能 滚动      更新时间：2023-09-26

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

这是函数的代码：

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

我正在使用这个插件用于灯箱

如何在灯箱可见的情况下禁用/启用该功能？

如果你想禁用整个页面的滚动，那么试试这个：

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

为了恢复到默认状态：

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

检查JSFiddle演示

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

您正在使用的插件具有可以利用的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();
           }
       }
    };
});
相关文章：