Html 隐藏html水平但不垂直滚动条

Hide html horizontal but not vertical scrollbar

提问by William Jones

I have an HTML textarea that is of fixed width, but variable height. I would like to set overflow:scrolland be able to show a vertical scrollbar, but not a horizontal one. I am not able to use overflow:autodue to other things specific to my situation.

我有一个宽度固定但高度可变的 HTML 文本区域。我想设置overflow:scroll并能够显示垂直滚动条，而不是水平滚动条。overflow:auto由于其他特定于我的情况，我无法使用。

I know there is no way using CSS2 to show only vertical but not horizontal scrollbars. Is there anything I can do with JavaScript to hide the horizontal scrollbar?

我知道没有办法使用 CSS2 只显示垂直滚动条而不显示水平滚动条。我可以用 JavaScript 做什么来隐藏水平滚动条？

回答by Nick Craver

You can use css like this:

您可以像这样使用 css：

overflow-y: scroll;
overflow-x: hidden;

回答by Kevin

Use CSS. It's easier and faster than javascript.

使用 CSS。它比javascript更容易和更快。

overflow-x: hidden;
overflow-y: scroll;

回答by rpalzona

Disable horizontal scrollbar completely by adding this code.

通过添加此代码完全禁用水平滚动条。

body{
  overflow-x: hidden;
  overflow-y: scroll;
}

回答by Jitendra Vyas

Using wrap=virtualin your HTML form boxes gets rid of the horizontal scrollbar at the bottom of the box:

使用wrap=virtual你的HTML表单箱摆脱在箱底部的水平滚动条：

  <textarea name= "enquiry" rows="4" cols="30" wrap="virtual"></textarea>

See examplehere : http://jsbin.com/opube3/2(Tested on FF and IE)

请参阅此处的示例：http: //jsbin.com/opube3/2 （在 FF 和 IE 上测试）

回答by Tirupati Balan

<div style="width:100px;height:100px;overflow-x:hidden;overflow-y:auto;background-color:#000000">

回答by Santosh Khalse

selector{
 overflow-y: scroll;
 overflow-x: hidden;
}

Working example with snippet and jsfiddle link https://jsfiddle.net/sx8u82xp/3/

带有代码段和 jsfiddle 链接的工作示例https://jsfiddle.net/sx8u82xp/3/

.container{
  height:100vh;
  overflow-y:scroll;
  overflow-x: hidden;
  background:yellow;
}

<div class="container">

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

</div>

回答by maultrommel

.combobox_selector ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border:1px solid #CCC;
    height: 200px;
    overflow: auto;
    overflow-x: hidden;
}

sets 200px scrolldown size, overflow-xhides any horizontal scrollbar.

设置 200px 向下overflow-x滚动大小，隐藏任何水平滚动条。

回答by Onyximo

For me:

为了我：

.ui-jqgrid .ui-jqgrid-bdiv {
   position: relative;
   margin: 0;
   padding: 0;
   overflow-y: auto;  <------
   overflow-x: hidden; <-----
   text-align: left;
}

Of course remove the arrows

当然去掉箭头