html html滾動條 chrome滾動條 - 隱藏滾動條,但仍然可以滾動




11 Answers

只是一個工作正常的測試。

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

工作小提琴

JavaScript的:

由於滾動條寬度在不同的瀏覽器中有所不同,所以最好用JavaScript處理它。 如果您執行Element.offsetWidth - Element.clientWidth ,將顯示確切的滾動條寬度。

JavaScript工作小提琴

要么

使用Position: absolute

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

工作小提琴

JavaScript工作小提琴

信息:

基於這個答案,我創建了一個簡單的滾動插件 。 我希望這會幫助某人。

我希望能夠瀏覽整個頁面,但沒有顯示滾動條。

在Google Chrome中,它是:

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

但Mozilla Firefox和Internet Explorer似乎並不像那樣工作。

我也嘗試過在CSS中:

overflow: hidden;

這確實隱藏了滾動條,但我不能滾動了。

有什麼辦法可以刪除滾動條,仍然可以滾動整個頁面? 請僅使用CSS或HTML。




這適用於我:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

注意:在最新版本的Firefox中, -moz-scrollbars-none屬性已被棄用( link )。




本Answer不包含代碼,因此以下是來自page的解決方案:

根據該頁面,此方法不需要事先知道滾動條的寬度,以便工作,並且該解決方案也適用於所有瀏覽器,並且可以在here看到。

好處是你不必使用填充或寬度差異來隱藏滾動條。

這也是放大安全。 填充/寬度解決方案在放大到最小值時顯示滾動條。

FF修正: http://jsbin.com/mugiqoveko/1/edit?output : http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>




#subparant{
    overflow:hidden;    
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:10%;
}

#child{
    width:511px;
    background-color:rgba(123,8,10,0.42);
}

<body>
    <div id="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>



HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

相應地應用CSS。

here檢查(在IE和FF中測試)。




如果由於某些原因想要使用box-model: border-box ,則在當前接受的答案中向內部div添加填充將不起作用。

在兩種情況下工作的內容都是將內部div的寬度增加到100%加上滾動條的寬度(假設overflow: hidden在外部div上)。

例如,在CSS中:

.container2 {
    width: calc(100% + 19px);
}

在JavaScript中,跨瀏覽器:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';






這將在身體上:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

這就是CSS:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}



我碰巧在我的項目中嘗試了上述解決方案,出於某種原因,由於div定位,我無法隱藏滾動條。 因此,我決定通過引入一個表面覆蓋它的div來隱藏滾動條。 下面的例子是針對水平滾動條的:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

相應的CSS如下所示:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}



只需將寬度設置為100%,填充為15px,overflow-x滾動並溢出:對於父級和任何寬度都是隱藏的,它適用於包括IE Edge在內的所有主流瀏覽器,IE8除外;降低。




我有這個問題。 超級簡單的修復。 得到兩個容器。 內部將是你的可滾動容器,外部顯然將容納內部:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

超級簡單,應該適用於任何瀏覽器。 祝你好運!




Related