jQuery 显示模态对话框时如何隐藏正文滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5292783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide the body scroll bar when showing modal dialog?
提问by mVChr
My home page has a lot of content. When I create any modal dialog, the body content scroll bar is visible and when we scroll, it scrolls down to the bottom of the page.
我的主页有很多内容。当我创建任何模态对话框时，正文内容滚动条是可见的，当我们滚动时，它会向下滚动到页面底部。
In the dialog I also have to display a lot of content. So, if I can hide the body scroll bar and show only modal's scroll bar means, it would be a nice user experience.
在对话框中，我还必须显示很多内容。因此，如果我可以隐藏正文滚动条并仅显示模态滚动条的方式，那将是一个不错的用户体验。
The idea is, when showing a modal dialog and some scrollable content on top of it, to disable the main page scroll bar and only show the scroll bar for currently visible modal div.
这个想法是，当显示一个模态对话框和它上面的一些可滚动内容时，禁用主页滚动条，只显示当前可见模态 div 的滚动条。
What do I have to do to hide the body content scroll bar and show one in the modal div.
我该怎么做才能隐藏正文内容滚动条并在模态 div 中显示一个。
My client side is full of JavaScript & jQuery.
我的客户端充满了 JavaScript 和 jQuery。
Any suggestions would be appreciative!
任何建议将不胜感激！
回答by mVChr
Add $('body').css('overflow','hidden')to your function that shows the modal, and $('body').css('overflow','scroll')to your function that closes the modal.
添加$('body').css('overflow','hidden')到显示模态$('body').css('overflow','scroll')的函数和关闭模态的函数中。
回答by SleepWalker
When I used $('body').css('overflow','scroll')or $('body').css('overflow', 'inherit')the scroll bar appeared not at the right corner of the browser window, but on the edge of the page container...
当我使用$('body').css('overflow','scroll')或$('body').css('overflow', 'inherit')滚动条不是出现在浏览器窗口的右上角，而是出现在页面容器的边缘时...
I know that this issue because of layout and css styles of the particular site, but in this case changing the style of html tag seems to be more universal:
我知道这个问题是由于特定站点的布局和 css 样式造成的，但在这种情况下，更改 html 标签的样式似乎更普遍：
$('html').css('overflow','hidden');- hide scroll bar$('html').css('overflow','scroll');- show scroll bar
$('html').css('overflow','hidden');- 隐藏滚动条$('html').css('overflow','scroll');- 显示滚动条
回答by Bryan Downing
If you wrap all of your body content in a wrapper div with overflow: hiddenyou can dynamically set the height of that div equal to the viewport height when you open your modal dialog.
如果您将所有正文内容包装在一个包装 div 中，overflow: hidden您可以在打开模态对话框时动态设置该 div 的高度等于视口高度。
回答by Hugo Balboa
you can add this into bootstrap.js
你可以将它添加到 bootstrap.js
Line:421
线路：421
this.$element.hide(), this.backdrop(function() {
a.$body.removeClass("modal-open"),$('html').css('overflow','scroll'), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})
Line:397
线路：397
this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()
this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()
