如何創建水平隱藏滾動條

Question

我實際上是在嘗試複製通常在移動應用中看到的水平滾動菜單。

我真的不明白爲什麼它不應該工作，但對我來說，隱藏垂直滾動條和水平滾動似乎是合乎邏輯的。我知道隱藏垂直滾動條有很多解決方案，但爲什麼水平滾動條不可能這樣做？

這是我迄今爲止創建的代碼片段，演示了垂直方式，但是如何修改水平方向？

我嘗試過：
overflow-y：hidden; overflow-x：scroll;

，但沒有奏效...

我可以把它彎曲到jQuery的，但是蔭不知道如何去這樣的說法，所以如果有一個兼容CSS的解決方案，這將幫助我。

.block, 
 
.container { 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.container { 
 
    border: 1px solid #aaa; 
 
    padding: 5px 0 5px 5px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.container-inner { 
 
    position: absolute; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
 
    .container-inner, 
 
    .block { 
 
    transform: scale(-1, 1); 
 
    -webkit-transform: scale(-1, 1); 
 
    } 
 
    .container-inner { 
 
    right: 0; 
 
    } 
 
} 
 
.block { 
 
    padding: 10px 0px 10px 0; 
 
}

<div class="container"> 
 
    <div class="container-inner"> 
 
    <div class="block"> 
 
     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. 
 
     <br/> 
 
     <br/>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. 
 
     <br/> 
 
     <br/>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. 
 
     <br/> 
 
     <br/>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. Quisque vitae tincidunt purus. Vivamus feugiat 
 
     bibendum erat, nec interdum urna porta sed. 
 
     <br/> 
 
     <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas 
 
     cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim 
 
     libero. 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

如果使用overflow: hidden滾動條消失，但你將無法滾動可言，所以，如果你想要一個帶有隱藏滾動條的可滾動div，你需要腳本或使其父母h ide滾動條。

這裏是如何對使用非腳本

.container { 
 
    width: 250px; 
 
    height: 220px;   /* 30px less high than inner to "hide" scroll */ 
 
    border: 1px solid #aaa; 
 
    overflow: hidden; 
 
} 
 
.block, 
 
.containerinner { 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.containerinner { 
 
    padding: 5px 0 5px 5px; 
 
    position: relative; 
 
    overflow: auto; 
 
    overflow-y: hidden; 
 
} 
 
.block { 
 
    padding: 10px 0px 10px 0; 
 
    white-space: nowrap 
 
}

<div class="container"> 
 
<div class="containerinner"> 
 
    <div class="block"> 
 
     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. 
 
     <br/> 
 
     <br/>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. 
 
     <br/> 
 
     <br/>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. 
 
     <br/> 
 
     <br/>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. Quisque vitae tincidunt purus. Vivamus feugiat 
 
     bibendum erat, nec interdum urna porta sed. 
 
     <br/> 
 
     <br/>Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas 
 
     cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim 
 
     libero. 
 
    </div> 
 
</div> 
 
</div>

而且這裏有2個鏈接顯示一些腳本樣本

• How to do a horizontal scroll on mouse wheel scroll?
• https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/

Answer 2

爲了避免垂直滾動條，只需確保您的內容的高度不超過你的容器的高度。這可以通過確保滾動容器和兒童之間的元素利用最大高度（100％）而不是一些硬編碼值來完成。

overflow: auto只能將一個滾動條添加到超過容器尺寸的子尺寸。

編輯：隱藏橫向滾動條是特定於平臺的，因爲它們跨平臺會有不同的高度。在Mac上，它是13px，因此滾動區域的容器需要小13px以隱藏滾動條。水平滾動菜單的

示例代碼，而垂直滾動條：

http://codepen.io/tlee/pen/WGxBYA

html { 
 
    font-size: 10px; 
 
} 
 
container { 
 
    display: block; 
 
    overflow: hidden; 
 
    /* Height of scrollbar on Mac is 13px */ 
 
    height: calc(5rem - 13px); 
 
} 
 
scroll-area { 
 
    display: block; 
 
    /* Viewable width of component. */ 
 
    width: 400px; 
 
    height: 5rem; 
 
    overflow: auto; 
 
    border: 1px solid lightgray; 
 
} 
 

 
button-menu { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 800px; 
 
    height: 100%; 
 
} 
 

 
button { 
 
    box-sizing: border-box; 
 
    flex: 1 0 auto; 
 
    font-size: 2rem; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<container> 
 
    <scroll-area> 
 
    <button-menu> 
 
     <button>Apple</button> 
 
     <button>Berkshire</button> 
 
     <button>Chevron</button> 
 
     <button>Deutsche Bank</button> 
 
     <button>Exxon</button> 
 
    </button-menu> 
 
    </scroll-area> 
 
</container>