CSS如何隐藏滚动条？

Posted 2023-04-26

有三种代码输入的方式可以在CSS隐藏滚动条。

详细方法如下：

方法一:

代码如下:

html overflow-y: scroll;

原理：强制显示ie的垂直滚动条，而忽略水平滚动条；
优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.；
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条；

方法二:(推荐采用)

代码如下:

html overflow-x: hidden; overflow-y: auto;

原理：隐藏横向滚动，垂直滚动根据内容自适应；
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现；
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到；

方法三:

代码如下:

body margin-right: -15px; margin-bottom: -15px;

原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象；
优点：在视觉上解决了这个问题，垂直滚动根据内容自适应；
缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。

参考技术A css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻。
::-webkit-scrollbar /*隐藏滚轮*/
display: none;


但是仅限于支持css3的浏览器。如果是其他浏览器的话，可以麻烦点，先overflow:hidden; 然后再用写个滚轮向上滚或者向下滚的事件来模拟。望采纳。 参考技术B overflow-y:scroll; 总是显示纵向滚动条
overflow-y:visible : 不剪切内容也不添加纵向滚动条

overflow-x:scroll; 总是显示横向滚动条
overflow-x:visible : 不剪切内容也不添加横向滚动条
望采纳 参考技术C SetScrollSizes(MM_TEXT, CSize(0, 0));//加上这句就没有了。

FlatSB_EnableScrollBar(m_hWnd, SB_BOTH, ESB_DISABLE_BOTH);３：设置窗口的属性在PreCreateWindow()加上
cs.Style &=~WS_VSCROLL４：SetScrollInfo中将Max, Min设为相等,就可以隐藏滚动条的显示SCROLLINFO si; 参考技术D

css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻
但是仅限于支持css3的浏览器。如果是其他浏览器的话，可以麻烦点，先overflow:hidden; 然后再用写个滚轮向上滚或者向下滚的事件来模拟。

如果不需要，CSS隐藏滚动条

【中文标题】如果不需要，CSS隐藏滚动条

【英文标题】：CSS hide scroll bar if not needed

【发布时间】：2013-09-14 01:00:09

【问题描述】：

我想弄清楚如果不需要我如何隐藏overflow-y:scroll;。我的意思是我正在建立一个网站，并且我有一个主要区域，其中将显示帖子，如果内容不超过当前宽度，我想隐藏滚动条。

另外，我的第二个问题。我想做这样当帖子超过当前宽度时，宽度会自动增加，内容不会开箱即用。

有人知道怎么做吗？

帖子区：

.content 
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;

主网站容器：

.container 
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;

【问题讨论】：

要隐藏垂直滚动条还是水平滚动条？您可以将带有 html 代码的示例发布到例如jsfiddle.net 并在此处链接

您好，我发布了我正在使用的 2 个类。在 html 上，只有调用类。

【参考方案1】：

将overflow-y 属性设置为auto，如果没有继承，则将其完全删除。

【讨论】：

我可以，但我的第二个问题也需要一些帮助，关于宽度，自动增加。

你可以随时尝试使用***搜索：***.com/questions/450903/…

你的例子中的滚动在哪里？

虽然设置 overflow-y: auto 解决了我的问题 - 该链接实际上并未显示此示例...

应该注意overflow-x: auto也可以隐藏水平滚动条。

【参考方案2】：

您可以使用overflow:auto;

您还可以使用 overflow-x 和 overflow-y 属性单独控制 x 或 y 轴。

示例：

.content overflow:auto;
.content overflow-y:auto;
.content overflow-x:auto;

【参考方案3】：

您可以同时使用 .content 和 .container 来溢出：自动。意味着如果它的文本超过自动滚动将来自 x 轴和 y 轴。 （不需要给单独的x轴和y轴通常给溢出：自动）

.content overflow:auto;

【参考方案4】：

.container overflow:auto; 可以解决问题。如果要控制特定方向，则应为该特定轴设置自动。 A.E.

.container overflow-y:auto; .container overflow-x:hidden;

上面的代码将隐藏 x 轴上的任何溢出，并在需要时在 y 轴上生成一个滚动条。但是您必须确保您的内容默认高度小于容器高度；如果没有，滚动条不会被隐藏。

【讨论】：

答案不会增加任何额外价值

【参考方案5】：

.selected-elementClass
    overflow-y:auto;

【讨论】：

答案不会增加任何额外价值

【参考方案6】：

溢出：自动；用于显示自动滚动条

【讨论】：

与***.com/a/40348064/2227743等其他答案相同

答案不会增加任何额外价值

@Akash 如果您确定答案是复制粘贴/复制/抄袭，您可以并且应该提出自定义标志。只需链接到原始答案并解释您的推理，例如“这个答案是重复的，因为它是从 xxx 年复制而来的。”