Prevent BODY from scrolling when a modal is opened

2019-01-02 16:43发布

站内问答 / JavaScript
1508 30 4

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I've tried to call the piece of javascript below when the modal is opened but without success

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

AND

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

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

30条回答
无色无味的生活
2楼-- · 2019-01-02 17:08

I just done it this way ...

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

But when the scroller dissapeared it moved everything right 20px, so i added 

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

straight after it.

Works for me.

查看更多
0人赞 添加讨论(0) 举报
无与为乐者.
3楼-- · 2019-01-02 17:10

You need to go beyond @charlietfl's answer and account for scrollbars, otherwise you may see a document reflow.

Opening the modal:

  1. Record the body width
  2. Set body overflow to hidden

  3. Explicitly set the body width to what it was in step 1.

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

Closing the modal:

  1. Set body overflow to auto

  2. Set body width to auto

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

Inspired by: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

查看更多
0人赞 添加讨论(0) 举报
人间绝色
4楼-- · 2019-01-02 17:10

worked for me

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});
查看更多
0人赞 添加讨论(0) 举报
梦醉为红颜
5楼-- · 2019-01-02 17:12

For those wondering how to get the scroll event for the bootstrap 3 modal:

$(".modal").scroll(function() {
    console.log("scrolling!);
});
查看更多
0人赞 添加讨论(0) 举报
妖精总统
6楼-- · 2019-01-02 17:14

This is the best solution for me:

Css:

.modal {
     overflow-y: auto !important;
}

And Js:

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}
查看更多
0人赞 添加讨论(0) 举报
明月照影归
7楼-- · 2019-01-02 17:16

The accepted answer doesn't work on mobile (iOS 7 w/ Safari 7, at least) and I don't want MOAR JavaScript running on my site when CSS will do.

This CSS will prevent the background page from scrolling under the modal:

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

However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.

If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the 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; 
}

I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.

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

this answer is a x-post.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)