我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。

当模式被打开时,我试图调用下面的javascript片段,但没有成功

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

请注意,我们的网站放弃了对IE6的支持,IE7+需要兼容。


当前回答

下面是我在React中修复这个问题的方法:

useEffect(() => {
  if (isShown) {
    const width = document.body.clientWidth;
    document.body.style.overflow = "hidden";
    document.body.style.width = `${width}px`;
  } else {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  }

  return () => {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  };
}, [isShown]);

其他回答

这是TypeScript中的一种解决方案,可以轻松地阻止事件扩展,也可以处理移动设备。当禁用垂直滚动条时,这也不会导致水平跳转。 只需使用底部的导出函数,例如任何HTML元素上的onclick处理程序。如果不是在NodeJS环境中运行,只需删除该进程。客户端检查。

/**
 * Handles scroll events for modal content
 */

const events = [
  'DOMMouseScroll',
  'mousewheel',
  'wheel',
  'touchmove',
  'keydown',
  'mousedown',
  'scroll',
];

const preventDefault = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();
  return false;
};

let currentY: number;

const disableScroll = () => {
  currentY = window.scrollY;

  events.forEach((event) => {
    window.addEventListener(event, preventDefault, {
      passive: false,
    });
  });

  const bodyStyle = document.body.style;
  bodyStyle.setProperty('touch-action', 'none');
  bodyStyle.setProperty('position', 'fixed');
  bodyStyle.setProperty('overflow-y', 'scroll');
  bodyStyle.setProperty('width', '100%');
  bodyStyle.setProperty('top', `-${currentY}px`);
};

const enableScroll = () => {
  events.forEach((event) => {
    window.removeEventListener(event, preventDefault);
  });

  const bodyStyle = document.body.style;
  bodyStyle.removeProperty('touch-action');
  bodyStyle.removeProperty('position');
  bodyStyle.removeProperty('overflow-y');
  bodyStyle.removeProperty('width');
  bodyStyle.removeProperty('top');
  window.scroll(0, currentY);
};

/**
 * Makes a component (e.g. popup) modal
 */
export const makeModal = () => {
  if (process.client) {
    disableScroll();
  }
};

/**
 * Makes a component (e.g. popup) non-modal
 */
export const makeNonModal = () => {
  if (process.client) {
    enableScroll();
  }
};

您需要超越@charlietfl的答案并考虑滚动条,否则您可能会看到一个文档回流。

打开模式:

记录身体宽度 将正文溢出设置为隐藏 显式地将主体宽度设置为步骤1中的宽度。 Var $body = $(document.body); var oldWidth = $body.innerWidth(); 美元body.css(“溢出”,“隐藏”); 美元body.width (oldWidth);

关闭模态:

将body overflow设置为auto 将车身宽度设置为auto Var $body = $(document.body); 美元body.css(“溢出”,“汽车”); 美元body.width(“自动”);

灵感来源:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

基于此提琴:http://jsfiddle.net/dh834zgw/1/

下面的代码片段(使用jquery)将禁用窗口滚动:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

在你的css中:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

现在,当你删除模态时,不要忘记删除html标签上的noscroll类:

$('html').toggleClass('noscroll');

许多人建议在正文上使用“overflow: hidden”,这是行不通的(至少在我的情况下不是),因为它会让网站滚动到顶部。

这是适用于我的解决方案(手机和电脑),使用jQuery:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

这将使模式的滚动工作,并防止网站在同一时间滚动。

这是

body.modal-open {
   overflow: hidden !important;
}