我的主页有很多内容 . 当我创建任何模态对话框时，可以看到正文内容滚动条，当我们滚动时，它会向下滚动到页面底部 .
在对话框中我还要显示很多内容 . 所以，如果我可以隐藏身体滚动条并仅显示模态的滚动条意味着，那将是一个很好的用户体验 .
这个想法是，当在它上面显示模态对话框和一些可滚动内容时，禁用主页面滚动条并仅显示当前可见模态div的滚动条 .
我该怎么做才能隐藏正文内容滚动条并在模态div中显示一个 .
我的客户端充满了JavaScript和jQuery .
任何建议都会很感激！
将 $('body').css('overflow','hidden') 添加到显示模态的函数中，并将 $('body').css('overflow','scroll') 添加到关闭模态的函数中 .
$('body').css('overflow','hidden')
$('body').css('overflow','scroll')
当我使用 $('body').css('overflow','scroll') 或 $('body').css('overflow', 'inherit') 时，滚动条不会出现在浏览器窗口的右下角，而是出现在页面容器的边缘...
$('body').css('overflow', 'inherit')
我知道这个问题是因为特定网站的布局和CSS样式，但在这种情况下，更改html标签的样式似乎更普遍：
$('html').css('overflow','hidden'); - 隐藏滚动条
$('html').css('overflow','hidden');
$('html').css('overflow','scroll'); - 显示滚动条
$('html').css('overflow','scroll');
如果使用 overflow: hidden 将所有正文内容包装在包装器div中，则可以在打开模式对话框时动态设置该div的高度等于视口高度 .
overflow: hidden
你可以将它添加到bootstrap.js中
行：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") })
行：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()
4 回答
将
$('body').css('overflow','hidden')添加到显示模态的函数中，并将$('body').css('overflow','scroll')添加到关闭模态的函数中 .当我使用
$('body').css('overflow','scroll')或$('body').css('overflow', 'inherit')时，滚动条不会出现在浏览器窗口的右下角，而是出现在页面容器的边缘...我知道这个问题是因为特定网站的布局和CSS样式，但在这种情况下，更改html标签的样式似乎更普遍：
$('html').css('overflow','hidden');- 隐藏滚动条$('html').css('overflow','scroll');- 显示滚动条如果使用
overflow: hidden将所有正文内容包装在包装器div中，则可以在打开模式对话框时动态设置该div的高度等于视口高度 .你可以将它添加到bootstrap.js中
行：421
行：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()