如何在css中完全从UI中删除底部滚动条

I am removing horizontal scroll bar completely from bottom. I tried this below ways.

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

1st way

Hide html horizontal but not vertical scrollbar

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

This way is working when the page is first loaded. But when I click on the UI. Bottom scroll bar is appeared but not scrollable and disabled. So UI shrinks slightly and disabled scrollbar is shown at the bottom.

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

2nd way

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

This removed all scroll bar from UI. Not even the vertical scroll bar is shown. Even onclick, neither vertical nor horizontal scroll bar is shown.

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

Is there a way to remove horizontal scroll bar completely in this way ?Not even shown when the UI is clicked.

有没有办法以这种方式完全删除水平滚动条?单击UI时甚至没有显示。

1 个解决方案

#1

By bottom scroll-bar, I assume you are referring to the horizontal scrollbar. This appears when you have content that overlaps the width of your element.

通过底部滚动条,我假设您指的是水平滚动条。当您的内容与元素的宽度重叠时,会出现此信息。

As a best practice, you should align your content so it's viewable without horizontal scrolling. You might even want to include some padding to make it easier on the eyes.

作为最佳实践,您应该对齐您的内容,使其在没有水平滚动的情况下可见。你甚至可能想要包含一些填充物以使眼睛更容易。

But if it's required, you can set the overflow-x property and set to hidden.

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

With the hidden property, the content is clipped, scrolling is disabled and the scrollbar doesn't appear.

使用隐藏属性,内容将被剪切,滚动将被禁用,并且不会显示滚动条。

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

#1