在打开模态时防止BODY滚动

2020/09/30 18:41 · javascript ·  · 0评论

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

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

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

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

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

在显示模式对话框时,Bootstrap会modal自动将类添加modal-open到主体,而在对话框隐藏时将其删除。因此,您可以将以下内容添加到CSS中:

body.modal-open {
    overflow: hidden;
}

您可能会争辩说上面的代码属于Bootstrap CSS代码库,但这是将其添加到您的站点的简便修补程序。

2013年2月8日更新

这已经在Twitter Bootstrap 2.3.0版中停止工作-他们不再将
modal-open添加到正文中。

一种解决方法是在要显示模式时将类添加到主体,并在关闭模式时将其删除:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013年3月11日更新
看起来
modal-open该类将在Bootstrap 3.0中返回,明确地是为了防止滚动:

在主体上重新引入.modal-open(因此我们可以在此处滚动滚动条)

请参阅:https : //github.com/twitter/bootstrap/pull/6342-查看“模式”部分。

可接受的答案不适用于移动设备(至少是装有Safari 7的iOS 7和Safari 7),并且我不希望CSS支持时在我的网站上运行MOAR JavaScript。

此CSS可以防止背景页面在模式下滚动:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

但是,它也具有基本滚动到顶部的轻微副作用。position:absolute解决了此问题,但重新引入了在移动设备上滚动的功能。

如果您知道您的视口(我的插件将视口添加到<body>),您只需添加一个CSS切换器position

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

我还添加了此选项,以防止显示/隐藏模式时基础页面向左/向右跳转。

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

这个答案是x-post。

只需隐藏身体溢出,就不会使身体滚动。隐藏模态时,将其还原为自动模态。

这是代码:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

您可以尝试将主体尺寸设置为带有溢出的窗口尺寸:模式打开时隐藏

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

打开模式:

  1. 记录body宽度
  2. body溢出设置hidden
  3. 将主体宽度显式设置为步骤1中的宽度。

    var $body = $(document.body);
    var oldWidth = $body.innerWidth();
    $body.css("overflow", "hidden");
    $body.width(oldWidth);
    

关闭模式:

  1. body溢出设置auto
  2. body宽度设置auto

    var $body = $(document.body);
    $body.css("overflow", "auto");
    $body.width("auto");
    

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

警告:以下选项与Bootstrap v3.0.x无关,因为在这些版本中的滚动已明确限于模式本身。如果禁用滚轮事件,则可能会无意间阻止某些用户以高度大于视口高度的模态查看内容。


另一个选择:车轮事件

滚动事件不是取消。但是,可以取消鼠标滚轮滚轮事件。最大的警告是,并非所有旧版浏览器都支持它们,Mozilla最近才在Gecko 17.0中添加了对后者的支持。我不知道它的完整范围,但是IE6 +和Chrome确实支持它们。

利用它们的方法如下:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

仅仅通过更改CSS就无法使其在Chrome上运行,因为我不希望页面滚动回到顶部。这工作正常:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

试试这个:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

它为我工作。(支持IE8)

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

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

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

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

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

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});

对于引导,你可以试试这个(在工作FirefoxChromeMicrosoft Edge):

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

希望这可以帮助...

可以添加“ is-modal-open”类或使用javascript修改body标签的样式,并且可以按预期工作。但是我们要面对的问题是当身体溢出时,它会跳转到顶部(scrollTop将变为0)。稍后将成为可用性问题。

作为此问题的解决方案,而不是更改body标签溢出:隐藏在html标签上进行更改

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

我不确定这段代码,但是值得一试。

在jQuery中:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

就像我之前说的,我不确定100%,但是还是尝试一下。

最好的解决方案是body{overflow:hidden}大多数答案使用的仅css解决方案。一些答案提供了一种解决方案,还可以防止滚动条消失引起的“跳转”。但是,没有一个太优雅了。因此,我编写了这两个函数,它们似乎工作得很好。

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

查看此jsFiddle以查看其使用情况。

截至2017年11月,Chrome推出了新的CSS属性

overscroll-behavior: contain;

尽管撰写本文时对跨浏览器的支持有限,但这解决了这个问题。

有关完整的详细信息和浏览器支持,请参见下面的链接

许多人建议在主体上显示“溢出:隐藏”,这将无法工作(至少在我的情况下如此),因为它将使网站滚动到顶部。

这是使用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');
    });

这将使模式的滚动正常工作,并阻止网站同时滚动。

您可以使用以下逻辑,我对其进行了测试并且可以正常工作(即使在IE中)

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

我不是100%肯定它可以与Bootstrap一起使用,但是值得一试-它可以与Remodal.js一起使用,可以在github上找到:http ://vodkabears.github.io/remodal/,这对于方法是有意义的非常相似。

要阻止页面跳到顶部并防止内容的右移,请body在触发模式时将类添加到,并设置以下CSS规则:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

position:staticheight:auto结合在一起才能阻止内容向右跳。overflow-y:hidden;被模态的背后滚动停止页面。

基于此提琴: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');

遗憾的是,以上所有答案都无法解决我的问题。

在我的情况下,网页最初具有滚动条。每当我单击模式时,滚动条都不会消失并且标题将向右移动一点。

然后,我尝试添加.modal-open{overflow:auto;}(大多数人推荐)。它确实解决了问题:打开模式后,滚动条出现。但是,出现了另一个副作用,即“标题下方的背景将向左移一点,同时模态后面还有另一个长条”

模态后面的长条

幸运的是,添加完后{padding-right: 0 !important;},一切都已完美修复。标头和正文背景均未移动,并且模式仍然保留滚动条。

固定图片

希望这可以帮助仍然坚持该问题的人。祝好运!

大部分内容都在这里,但是我看不到任何答案可以将所有内容组合在一起。

问题是三重的。

(1)防止基础页面滚动

$('body').css('overflow', 'hidden')

(2)并移除滚动条

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3)清除模态时的清理

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

如果模态不是全屏,则将.modal绑定应用于全屏覆盖。

我对Bootstrap 3的解决方案:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

因为对我来说唯一overflow: hiddenbody.modal-open类并没有阻止该网页向左移动由于原来的margin-right: 15px

我只是这样做的...

$('body').css('overflow', 'hidden');

但是当滚动条消失时,它会将所有内容正确移动了20px,所以我添加了

$('body').css('margin-right', '20px');

之后。

为我工作。

如果模式是高度/宽度的100%,“ mouseenter / leave”将起作用以轻松启用/禁用滚动。这对我来说真的很有效:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

我有一个由复选框黑客生成的边栏。但是主要思想是保存文档scrollTop,而不是在滚动窗口期间对其进行更改。

我只是不喜欢当正文变为“溢出:隐藏”时页面跳动。

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

为我工作

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

为什么不像布尔玛那样去做呢?当模式激活时,将其类.is-clipped添加到html中,这是溢出的:hidden!important; 就是这样。

编辑:Okey,布尔玛有此错误,所以您还必须添加其他内容,例如

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

因为对我来说,这个问题主要在iOS上提出,所以我提供了仅在iOS上解决此问题的代码:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

上面的答案都不适合我。因此,我找到了另一种有效的方法。

只需添加一个scroll.(namespace)监听器和集scrollTopdocument最新值即可...

并在关闭脚本中删除侦听器。

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
  
  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

更新

看来,这在chrome上效果不佳。有什么建议可以解决吗?

这为我工作:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

对于那些想知道如何获取bootstrap 3模态的滚动事件的人:

$(".modal").scroll(function() {
    console.log("scrolling!);
});
本文地址:http://javascript.askforanswer.com/zaidakaimotaishifangzhibodygundong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!