html - CSS - 在没有固定宽度的情况下隐藏div中的滚动条

Question

我已经阅读了很多答案并尝试了很多关于如何在 div 中隐藏滚动条的代码，但答案几乎总是针对具有固定大小的 div，解决方案是隐藏滚动条在包装 div 中，然后在工作 div 中移动(隐藏)滚动条离开屏幕。但是要让它工作，你必须知道 div 的大小，我所有的 div 都是使用 width:% 计算的。

有人可以告诉我如何隐藏 div 中显示的滚动条与 css，看到我正在使用 Angular2 框架并且不想在其中包含 javascript/jquery。

HTML:

<div id="boks3">
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>
    * <br>

</div>

<div id="stack1">
 <div id="boks1">
 </div>
 <div id="boks5">
 </div>
</div>

<div id="stack2">
  <div id="boks2">
  </div>
  <div id="boks4">
  </div>
</div>

CSS:

#stack1 {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #000000;
}
#boks3,
#boks1,
#boks2,
#boks4,
#boks5 {
  background-color: #ff3333;
  width: 32%;
  position: absolute;
  margin-left: 33.5%;
  padding: 0px 0px 0px 5px;
  z-index: 3;
  height: 100px;
  text-align: left;
  overflow: auto;
}
#boks1 {
  background-color: #ff6666;
  margin-left: 2%;
  z-index: 1;
  height: 100px;
}
#boks2 {
  background-color: #ff4d4d;
  margin-left: 17%;
  z-index: 2;
  height: 100px;
}
#boks5 {
  background-color: #ff0000;
  margin-left: 65%;
  z-index: 1;
  text-align: right;
  height: 100px;
}
#boks4 {
  background-color: #ff1a1a;
  margin-left: 50%;
  z-index: 2;
  text-align: right;
  height: 100px;
}
#stack1:hover #boks1,
#stack1:hover #boks5 {
  background-color: yellow;
  z-index: 4;
}
#stack2:hover #boks2,
#stack2:hover #boks4 {
  background-color: green;
  z-index: 4;
}

还有position:absolute；使它不同于我所提出的其他类似问题。目前我可以隐藏滚动条，但是当我调整浏览器窗口大小时，您可以看到滚动条的一部分突出来了。

Answer 1

您可以在当前 div 周围添加一个 div 包装，并使包装 div overflow: hidden。将内部 div 更改为 `calc(100% + 20px)。

例如:

private hideScrollbar(): void {
  this.parentNode = this.el.nativeElement.parentNode;
  this.wrapper = document.createElement('div');
  this.wrapper.style.width = this.el.nativeElement.offsetWidth + 'px';
  this.wrapper.style.height = this.el.nativeElement.offsetHeight + 'px';
  this.wrapper.style.overflow = 'hidden';
  this.el.nativeElement.style.width = 'calc(100% + 20px)';
  this.el.nativeElement.style.height = 'calc(100% + 20px)';
  // set the wrapper as child (instead of the element)
  this.parentNode.replaceChild(this.wrapper, this.el.nativeElement);
  // set element as child of wrapper
  this.wrapper.appendChild(this.el.nativeElement);
}

您可以在 Angular2-drag-scroll 中找到上述代码的更多详细信息