使用溢出时无法隐藏滚动条:自动

Question

我有这个CSS:

.div {
    background-color: red;
    position: relative;
    height: 414px;
    overflow: auto;
    width: 902px;
    margin: 0px auto;
}

我试过overflow-y: hidden;,滚动条消失但滚动不起作用.希望你明白我的意思......另外,我应该使用自动还是滚动？有了自动,我也看到了水平条.

这是JSFiddle:http://jsfiddle.net/sp95S/
谢谢!

Answer 1

创建一个内部div:http://jsfiddle.net/sp95S/1/

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
}
#inner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;
}

Answer 2

似乎您想让页面在不显示滚动条的情况下仍然滚动。

这已经在这里回答了几次：

• 隐藏滚动条，同时仍然可以使用鼠标/键盘滚动
• 在 HTML 页面上隐藏滚动条

基本上你可以使用javascript（或jquery，虽然你不一定需要它）。在 webkit 浏览器上，有一个隐藏滚动条的功能：

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

但它不适用于 Firefox 或 Internet Explorer 或歌剧。

Answer 3

如果你想隐藏滚动条，但保留功能，你可以使用：

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}