Question

我似乎无法弄明白，我怎么能隐藏一个位置为固定属性的元素上的滚动条。我需要在我的应用程序中使用固定高度的固定侧边菜单，其余内容应该是可滚动的。我已经尝试将它包装在另一个div中并将父级的overflow属性设置为隐藏，但它似乎不适用于固定元素。任何建议将不胜感激。这是snipet：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Blabla</title>
</head>
<body>
<style>
.blabla {
position: fixed;
    height: 150px;
    width: 200px;
    background: red;
    /*overflow-y: hidden;*/
}
.blabla2 {

font-size: 20px;
    text-align: center;
    height: 149px;
    overflow-y: scroll;
}
</style>
<div class="blabla">
  <div class="blabla2">
  	blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
  	blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
    blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>
  </div>
</div>
</body>
</html>

＆＃13;

Answer 1

.blabla2::-webkit-scrollbar {
width: 0px;
background: transparent;
}

来源： Hide scroll bar, but while still being able to scroll

Answer 2

我不确定我是否正确理解了您的问题，但如果您不希望固定字段可滚动，只需添加whitespace analyzer即可。

这是一个工作示例

＆＃13;

overflow:hidden;

＆＃13;

.blabla {
  position: fixed;
  height: 150px;
  width: 200px;
  background: red;
  /*overflow-y: hidden;*/
}

.blabla2 {
  font-size: 20px;
  text-align: center;
  height: 149px;
  overflow: hidden;
}

＆＃13;

在div上隐藏滚动条，其位置为：fixed property

2 个答案: