Html Bootstrap:如何禁用垂直滚动条?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17726641/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:17:18  来源:igfitidea点击:

Bootstrap : how to disable vertical scrollbar?

htmlcsstwitter-bootstrapbootstrap-modal

提问by user1929393

when my modal popup window opens, it adds a vertical scrollbar to the right of the browser window. How do i disable this? I think this is enabled when the modal window has a very large height value where it needs to scroll. i want to disable this as my form height does not exceed the window height.

当我的模态弹出窗口打开时,它会在浏览器窗口的右侧添加一个垂直滚动条。我如何禁用它?我认为当模态窗口需要滚动的高度值非常大时启用此功能。我想禁用它,因为我的表单高度不超过窗口高度。

回答by Patsy Issa

In your css add :

在你的 css 添加:

body {
  overflow-y:hidden;
}

回答by alx

I have the same problem with bootstrap 3.0.0. It seems that .modalclass has overflow-y: scrollrule which results in scrollbar always visible.

我对 bootstrap 3.0.0 有同样的问题。似乎.modal该类具有overflow-y: scroll导致滚动条始终可见的规则。

So, you can amend this either locally:

因此,您可以在本地修改它:

<div class="modal" ... style="overflow-y: auto;">
    ...
</div>

or globally:

或全球:

<style>
.modal {
    overflow-y: auto;
}
</style>

回答by Deepak Kv

Add style to body as:

将样式添加到正文:

body { 
  padding-right: 0px !important;
  overflow-y: hidden !important;
}

回答by Mathiokore

If your table is a child of a div such as <div class="table-responsive">, add the following style within the parent div tag so that the div tag now reads: <div class="table-responsive" style="overflow-y: hidden">.

如果您的表是 div 的子级,请<div class="table-responsive">在父 div 标签中添加以下样式,以便 div 标签现在显示为:<div class="table-responsive" style="overflow-y: hidden">.

NB:your div may be applying a different style other than .table-responsive, this would still work in such a case.

注意:您的 div 可能正在应用 .table-responsive 以外的不同样式,这在这种情况下仍然有效。

You can also override the style in your tableor tbodytags, this will work well if there is no parent div tag whose style allows the table to scroll. If there is such a parent div tag you will still be able to lock the table from scrolling when you apply the following style, but the containing parent div will still have the scrollbar displayed albeit disabled. So, in the tabletag it will be: <table style="overflow-y: hidden">or in the case of the tbodytag: <tbody style="overflow-y: hidden">

您还可以覆盖表格tbody标签中的样式,如果没有其样式允许表格滚动的父 div 标签,这将很有效。如果有这样的父 div 标签,当您应用以下样式时,您仍然可以锁定表格不滚动,但包含的父 div 仍会显示滚动条,尽管已禁用。所以,在table标签中它将是:<table style="overflow-y: hidden">或者在tbody标签的情况下:<tbody style="overflow-y: hidden">

The above works even when your div, table or tbody tags are applying other styles from external (e.g. bootstrap) or self-defined styles. so if you had a tag such as <table class="table table-sm table-striped">you can still do: <table class="table table-sm table-striped" style="overflow-y: hidden">

即使您的 div、table 或 tbody 标签正在应用来自外部(例如引导程序)或自定义样式的其他样式,上述内容仍然有效。所以如果你有一个标签,<table class="table table-sm table-striped">你仍然可以这样做:<table class="table table-sm table-striped" style="overflow-y: hidden">

In case you want to disable both horizontal and vertical scrolling, you just need to add the following within your style attribute so that it now reads: style="overflow-x: hidden; overflow-y: hidden"

如果你想同时禁用水平和垂直滚动,你只需要在你的 style 属性中添加以下内容,以便它现在显示: style="overflow-x: hidden; overflow-y: hidden"

回答by Hawckins

If the model window height is not more than normal window height, it doesn't make any sense to display the the scroll bar. Check weather any <div></div>used to fade the background behind the model window has extra height than the viewpoint.

如果模型窗口高度不超过正常窗口高度,则显示滚动条没有任何意义。检查<div></div>用于淡化模型窗口后面背景的天气是否比视点具有额外的高度。