如何创建水平隐藏滚动条

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>