如何从 CSS 中的 UI 中完全删除底部滚动条答案

【问题标题】：How to remove only bottom scroll bar completely from UI in css如何从 CSS 中的 UI 中完全删除底部滚动条
【发布时间】：2016-03-01 05:43:45
【问题描述】：

我正在从底部完全移除水平滚动条。我尝试了以下方式。

第一种方式

Hide html horizontal but not vertical scrollbar

这种方式在页面首次加载时有效。但是当我点击用户界面时。底部滚动条出现但不可滚动和禁用。所以 UI 会略微缩小，底部会显示禁用的滚动条。

第二种方式

::-webkit-scrollbar {
    display: none;
}
::-moz-scrollbar {
    display: none;
}
::-o-scrollbar {
    display: none;
}

这从 UI 中删除了所有滚动条。甚至没有显示垂直滚动条。即使onclick，也没有显示垂直和水平滚动条。

有没有办法以这种方式完全移除水平滚动条？点击 UI 时甚至不显示。

【问题讨论】：

【解决方案1】：

通过底部滚动条，我假设您指的是水平滚动条。当您的内容与元素的宽度重叠时，就会出现这种情况。

作为最佳做法，您应该对齐内容，使其无需水平滚动即可查看。您甚至可能想要包含一些填充物，以使眼睛更容易。

但如果需要，可以设置overflow-x属性，设置为hidden。

使用 hidden 属性，内容被剪裁，滚动被禁用并且滚动条不出现。

【讨论】：