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 外，所有流行的浏览器都支持此功能，您需要在 Firefox 中使用 jQuery 来执行此操作。

只需将以下类添加到您的 CSS：

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

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

Answer 3

对于 Chrome，请使用

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

供 Mozilla 使用：

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

在此处查看完整摘要。这可能会有所帮助：

    #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 ，试试