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

Posted 2023-02-21

【中文标题】隐藏html水平但不垂直滚动条

【英文标题】：Hide html horizontal but not vertical scrollbar

【发布时间】：2011-02-05 08:49:52

【问题描述】：

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

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

【问题讨论】：

不，使用 CSS2 和 overflow:scroll; 无法显示一个栏而不显示另一个。这是overflow:scroll 所固有的； javascript 只能做 CSS 允许的事情。然而，我猜你可以使用overflow:auto，你只是不知道怎么用。您能否详细说明“针对您的具体情况的其他事项”？

【参考方案1】：

你可以像这样使用css：

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

【讨论】：

我看到它是 CSS3，当我测试它时它在 Firefox 中不起作用。我还看到，这在过去是一个仅限 IE 的属性。

@wiliamjones - 这适用于 Firefox...你有示例页面吗？可能是其他一些布局原因它不起作用。

@william - 这是它工作的完整示例，在 Firefox 中测试:) jsfiddle.net/qpZ8k

你说得对，它确实适用于 Firefox，它是与此属性不兼容的 Prototype javascript 库，这很容易解决。这个属性在浏览器中是否普遍可靠？

@williamjones - 是的，这些东西通常是这种情况，浏览器实现了它，然后它是后来的标准。

【参考方案2】：

使用 CSS。它比 javascript 更简单、更快捷。

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

【参考方案3】：

在 HTML 表单框中使用 wrap=virtual 可以消除框底部的水平滚动条：

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

在此处查看示例：http://jsbin.com/opube3/2 （在 FF 和 IE 上测试）

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案6】：

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

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

【参考方案7】：

对我来说：

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

当然要去掉箭头

【参考方案8】：

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

带有 sn-p 和 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>