html - 我可以只使用 css 在移动设备上实现没有滚动条的可滚动 flex 容器吗？

Question

我在这里上传了一个视频:https://streamable.com/uyddy

我在问我是否可以以某种方式隐藏该特定 div 中的水平滚动条，同时仍然能够滚动？我想在移动设备上实现这一点。

我在这里附上了代码: https://codepen.io/UrsuGrizzly/full/aVRZyg/ https://jsfiddle.net/o2ucuorL/

<div id="bottom">
  <a href="#" id="all">All</a>
  <a href="#">Images</a>
  <a href="#">Videos</a>
  <a href="#">News</a>
  <a href="#">Maps</a>
  <a id="books" href="#">Books</a>
  <a id="flights" href="#">Flights</a>
  <a id="personal" href="#">Personal</a>
  <a id="stools" href="#">Search tools</a>
  <a id="moar" href="#">More</a>
  <a href="#" id="settings">Settings</a>
  <a href="#" id="tools">Tools</a
</div>

body{
  font-family: arial,sans-serif;
  font-size: 13px;
 }

 #bottom{
  grid-area: 2/1/3/3;
  display: flex;
  overflow-x:scroll;
 }

 #bottom a{
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,0.54);
  padding: 14px 16px 12px 16px;
  }

 #bottom #stools{
  border-left: 1px solid rgba(0,0,0,.12);
  padding: 14px 16px 12px 24px;
  white-space:nowrap;
  }

 #bottom #all{
  color: #4285f4;
  border-bottom: 2px solid #4285f4;
  }

Answer 1

我要做的只是将#bottom div 包裹在父div 中，高度固定，溢出属性设置为隐藏。然后你只需要给#bottom div 一个填充底部，其高度与滚动条的高度相同(大约 10px)。这就是全部:)，效果很好。留下代码:

// HTML Part
<div class="container">
 <div id="bottom">              
  <a href="#" id="all">All</a>
  <a href="#">Images</a>
  <a href="#">Videos</a>
  <a href="#">News</a>
  <a href="#">Maps</a>
  <a id="books" href="#">Books</a>
  <a id="flights" href="#">Flights</a>
  <a id="personal" href="#">Personal</a>
  <a id="stools" href="#">Search tools</a>
  <a id="moar" href="#">More</a>
  <a href="#" id="settings">Settings</a>
  <a href="#" id="tools">Tools</a>
 </div>
</div>

// CSS Part
body {
    padding: 0;
    margin: 0;
    font-family: arial,sans-serif;
    font-size: 13px;
    }

.container {
    height: 43px;
    width: 100%;
    overflow: hidden;
    }

#bottom {
    grid-area: 2/1/3/3;
    display: flex;
    overflow-x: scroll;
    padding-bottom: 10px;
    }

#bottom a {
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: #0000008a;
    padding: 14px 16px 12px 16px;
    white-space: nowrap;
    }

#bottom a#all {
    color: #4285f4;
    border-bottom: 2px solid #4285f4;
}