Question

我想隐藏我的垂直滚动条，但是仍然能够垂直和水平滚动。

我尝试使用

overflow-y: hidden; overflow-x: scroll;

但是它删除了垂直滚动的功能。

我尝试使用来设置滚动条的样式

html .example-container {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none;  /* IE 10+ */
}

和

html .example-container::-webkit-scrollbar { /* WebKit */
  width: 4;
  height: 0;
}

这会使两个滚动条都隐藏起来，因此水平滚动条的可见性很重要。

尝试的所有三种方法的示例： https://stackblitz.com/edit/angular-gyq9ub

Answer 1

为您的内部div 创建一个包装器div ，然后设置内部div overflow = auto 。外部div 溢出到隐藏。

例如；

<div class="wrapper-div">
   <div class="example-container">
      <p class="content">
        Start editing to see some magic happen :)
      </p>
      ---
   </div>
</div>

CSS：

.example-container {
     height: 100px;
     overflow: auto;
     max-height: 100%;
     margin-right: -100px;
     padding-right: 100px;
   }
.wrapper-div {
       overflow: hidden;
   }

就这样！请check this answer以便更好地理解。

Answer 2

如果您对水平滚动条进行样式化，则垂直滚动条会以某种方式消失，并且您仍然可以按照要求垂直滚动。但是我不清楚它为什么起作用

.example-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.example-container::-webkit-scrollbar-thumb:horizontal {
  background: #a1a1a1;
  border-radius: 3px;
  background-clip: padding-box;
}

/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
  background-color: #dbdbdb;
  border-radius: 3px;
  background-clip: padding-box;
}

如何在显示水平滚动条的同时隐藏垂直滚动条，并同时保持滚动条的功能？

2 个答案: