不需要时如何隐藏垂直滚动条

Posted 2023-03-05

【中文标题】不需要时如何隐藏垂直滚动条

【英文标题】：how to hide a vertical scroll bar when not needed

【发布时间】：2012-03-22 13:14:51

【问题描述】：

我有一个文本区域，它包含在一个 div 中，因为我有 jquery 提示并且想在不更改边框的情况下使用不透明度。 有一个可见的垂直滚动条，我只希望在我输入文本字段时显示它并且它超出了容器。我试过溢出：自动；但不起作用。

文本字段：

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

样式：

#name  
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    

#message 
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;

【问题讨论】：

CSS hide scroll bar if not needed的可能重复

【参考方案1】：

在 .css 类中添加这个类

.scrol   
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;

并使用 div 中的类。喜欢这里。

<div> <p class = "scrol" id = "title">-</p></div>

我附上了图片，你看到上面代码的输出

【参考方案2】：

overflow: auto（或overflow-y: auto）是正确的方法。

问题是您的文本区域比您的 div 高。 div 最终切断了文本框，所以即使它看起来应该在文本高于 159px 时开始滚动，它也不会开始滚动，直到文本高于 400px 这是文本框的高度.

试试这个：http://jsfiddle.net/G9rfq/1/

我在文本框上设置了overflow:auto，并使文本框和div大小一样。

另外，我认为在div 中包含div 是无效的，浏览器会呈现它，但它可能会导致一些奇怪的事情发生。你的div 也没有关闭。

【讨论】：

当我们使用 -webkit-scrollbar 伪元素自定义滚动条时，如何使这个解决方案工作。 ?因为如果溢出是自动伪元素不起作用....我想自定义我的滚动条以及在不需要时隐藏？

【参考方案3】：

我认为overflow: auto; 或overflow: hidden; 应该这样做。

【讨论】：

正如我在问题中所说的溢出：自动；不工作:(

hidden 隐藏滚动条，但是一旦文本通过 div 它就不会显示滚动条，因此无法向下滚动以查看其余文本

我刚刚测试过它，它工作正常。你用的是什么浏览器？

我正在使用 firefox，但在 IE 中隐藏显示滚动条，无论文本是否通过 div，并且一旦通过 DIV 容器，滚动条不显示

尝试在#name div上添加position: relative;