CSS-隐藏div中没有固定宽度的滚动条

Question

<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;
}

也就是立场：绝对；使它不同于其他类似的问题，我觉得。目前我可以隐藏滚动条，但当我调整浏览器窗口的大小时，你可以看到部分滚动条伸出来。

Answer 1

您可以在当前div周围添加一个div包装，并使包装器div溢出：隐藏。将内部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中找到上面代码的更多细节