CSS - 隱藏div中沒有​​固定寬度的滾動條

Question

我已經閱讀了很多答案，並嘗試了很多關於如何在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; 
} 

結帳全部Snippest這裏。這可能會有所幫助：

#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，嘗試