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

似乎您希望页面仍然滚动而不显示滚动条。

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

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

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

但它不适用于Firefox或Internet Explorer或Opera。

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 */
}

Answer 4

如果要隐藏滚动条，但保持滚动，可以查看名为slimscroll的插件。滚动条在那里，但它可以配置为相当不明显。

http://rocha.la/jQuery-slimScroll

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

4 个答案: