Html 在 div 溢出时禁用垂直滚动条:自动

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

Disable vertical scroll bar on div overflow: auto

htmlcssscrollscrollbar

提问by joedborg

Is it possible to allow only a horizontal scroll bar when using overflow:auto (or scroll)?

使用溢出时是否可以只允许水平滚动条:自动(或滚动)?

回答by Luke

These two CSS properties can be used to hide the scrollbars:

这两个 CSS 属性可用于隐藏滚动条:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

回答by Siva Charan

You should use only

你应该只使用

overflow-y:hidden;- Use this for hiding the Vertical scroll

overflow-y:hidden;- 使用它来隐藏垂直滚动

overflow-x:auto;- Use this to show Horizontal scroll

overflow-x:auto;- 使用它来显示水平滚动

Luke has mentioned as both hidden. so I have given this separately.

卢克曾提到两者都是隐藏的。所以我单独给出了这个。

回答by Random Guy

overflow: auto;
overflow-y: hidden;

溢出:自动;
溢出-y:隐藏;

For IE8: -ms-overflow-y: hidden;

对于 IE8:-ms-overflow-y:隐藏;

Or Else :

要不然 :

To hide X:

隐藏 X

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

To hide Y:

隐藏 Y

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

回答by Nirav Mehta

If you want to accomplish the same in Gecko (NS6+, Mozilla, etc) and IE4+ simultaneously, I believe this should do the trick:V

如果您想同时在 Gecko(NS6+、Mozilla 等)和 IE4+ 中完成相同的操作,我相信这应该可以解决问题:V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

This will be applied to entire body tag, please update it to your relevant css and apply this properties.

这将应用于整个 body 标签,请将其更新为您的相关 css 并应用此属性。

回答by Zeinab

Add the following:

添加以下内容:

body{
overflow-y:hidden;
}

回答by tamueka

This rules are compatible whit all browser:

此规则与所有浏览器兼容:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

回答by Tahir Alvi

if you want to disable the scrollbar, but still able to scroll the content of inner DIV, use below code in css,

如果您想禁用滚动条,但仍然能够滚动内部 DIV 的内容,请在 css 中使用以下代码,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll is the class name of the target div.

divHideScroll 是目标 div 的类名。

It will work in all major browser (Chrome, Safari, Mozilla, Opera, and IE)

它适用于所有主流浏览器(Chrome、Safari、Mozilla、Opera 和 IE)