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


279

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

我知道无法使用CSS2仅显示垂直滚动条,而不能显示水平滚动条。我可以使用JavaScript隐藏水平滚动条吗?


3
不,使用CSS2,overflow:scroll;无法显示一个条,而不能显示另一条。它固有于overflow:scroll;javascript只能执行CSS允许的操作。但是,我的猜测是您可以使用overflow:auto,只是不知道如何使用。您能否详细说明“针对您情况的其他事项”?
tloflin

Answers:


575

您可以像这样使用CSS:

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

2
我看到它是CSS3,并且在测试时在Firefox中不起作用。我还看到,从过去开始,它就可以作为仅IE的属性使用。
威廉·琼斯

@wiliamjones-在Firefox中有效...您有示例页面吗?可能是其他一些布局原因导致其无法正常工作。
尼克·克雷弗

@william-这是它工作的完整示例,在firefox中进行测试:) jsfiddle.net/qpZ8k
Nick Craver

没错,它确实适用于Firefox,它是与此属性不兼容的Prototype javascript库,它很容易解决。该属性通常在浏览器之间是否可靠?
威廉·琼斯

@williamjones-是的,这些事情通常是这种情况,浏览器会实现它,然后作为事后考虑的标准。
尼克·克雷弗

30

使用CSS。它比javascript更容易,更快捷。

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

22

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

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

9

wrap=virtual在HTML表单框中使用摆脱了框底部的水平滚动条:

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

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



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

片段和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>


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

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


0

为了我:

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

当然要去掉箭头

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.