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

Question

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

有人可以让我知道如何隐藏显示css的div中的滚动条，看到我正在使用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;
}

也是位置：绝对;使它与我所感受到的其他类似问题不同。目前我可以隐藏滚动条，但是当我调整浏览器窗口大小时，您可以看到它的一部分突出。

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

中找到有关上述代码的更多详细信息

Answer 2

要隐藏滚动条，您可以使用WebKit。所有流行的浏览器，但Firefox支持这一点，你需要使用jQuery在Firefox中执行此操作。

只需将以下类添加到CSS中：

#boks3::-webkit-scrollbar { 
    display: none; 
}

这会隐藏滚动条，但仍然允许滚动这里是一个示例CodePen。

Answer 3

对于Chrome，请使用

#boks3::-webkit-scrollbar { 
    display: none; 
}

对于Mozilla使用：

html {
   overflow: -moz-scrollbars-none;
}

Checkout Full Snippest Here。这可能会有所帮助：

    #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;
    }
    /* Add This Into CSS Code */
    #boks3::-webkit-scrollbar { 
        display: none; 
    }
    #boks3{
        -ms-overflow-style: none;  // IE 10+
        overflow: -moz-scrollbars-none;
    }
    html {
       overflow: -moz-scrollbars-none;
    }

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

Answer 4

也许此信息可以帮助您https://coderwall.com/p/4wa6ba/hide-browser-scroll-bars，尝试