在具有位置的div上隐藏滚动条：固定属性[重复]答案

【问题标题】：Hide scrollbar on div with position: fixed property [duplicate]在具有位置的div上隐藏滚动条：固定属性[重复]
【发布时间】：2018-09-05 23:52:36
【问题描述】：

我似乎无法弄清楚，如何在具有 position: fixed 属性集的元素上隐藏滚动条。我的应用程序需要一个固定高度的固定侧边菜单，其余内容应该是可滚动的。我已经尝试将它包装在另一个 div 中并将父级的溢出属性设置为隐藏，但它似乎不适用于固定元素。任何建议将不胜感激。这是片段：

<!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>

【问题讨论】：

man 你的代码剪辑器完全按照你的意愿运行它并查看
我不希望滚动条可见
您希望滚动条仅在 HOVER 上可见？或者您希望永远无法向下滚动

标签： html css

【解决方案1】：

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

这是一个工作示例

.blabla {
  position: fixed;
  height: 150px;
  width: 200px;
  background: red;
  /*overflow-y: hidden;*/
}

.blabla2 {
  font-size: 20px;
  text-align: center;
  height: 149px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Blabla</title>
</head>
<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>

【讨论】：

我希望它可以滚动......我想隐藏滚动条。
然后看看this问题。希望有帮助
是的，我在那里找到了一个可行的解决方案。我接受我的问题是重复的市场。

【解决方案2】：

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

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

【讨论】：

这个可以在 Firefox、IE、Edge、Opera、Safari 上运行吗？
我相信它适用于 Firefox、IE 和其他可能需要使用 js/css 完成的。 google '::-webkit-scrollbar for [your browser]'