从左到右滑动没有滚动CSS或JS？

Question

我正在尝试在移动设备中从左向右滑动LI，我只使用CSS完成了它，我知道可以使用任何插件轻松完成，但我无法使用任何插件我的项目，以下是我创建的JSfiddle demo，主要要求是从底部移除滚动条，在移动设备中，当您触摸内容区域时会出现滚动条。

如果我正在制作父div overflow:hidden，那么我无法滑动。

＆＃13;

＆＃13;

.spotlight_numbers-v2 {
width: 100%;
max-width: 480px;
float: left;
background: #f3f3f3;
overflow: auto;
}
.spotlight_numbers-v2 > ul {
list-style: none;
margin: 0;
padding: 0;
width: 150%;
}
.spotlight_numbers-v2 > ul > li {
color: #606060;
font-weight: 500;
display: inline-block;
list-style: none;
margin: 0 15px;
padding: 10px;
text-transform: uppercase;
font-size: 16px;
}
.spotlight_numbers-v2 > ul > li > a {
color: #606060;
text-decoration: none;
}

＆＃13;

<div class="spotlight_numbers-v2">
  <ul>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospital</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Drugs</a></li>
    <li><a href="#">Interview</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

请建议

Answer 1

只需使用另一个容器，并使其高度小于.spotlight_numbers-v2的高度，并将容器设置为overflow: hidden;。

.container{
   height: 40px;
   overflow: hidden;
}

.spotlight_numbers-v2 {
  width: 100%;
  max-width: 480px;
  float: left;
  background: #f3f3f3;
  overflow-y: auto;
}
.spotlight_numbers-v2 > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 150%;
}
.spotlight_numbers-v2 > ul > li {
  color: #606060;
  font-weight: 500;
  display: inline-block;
  list-style: none;
  margin: 0 15px;
  padding: 10px;
  text-transform: uppercase;
  font-size: 16px;
}
.spotlight_numbers-v2 > ul > li > a {
  color: #606060;
  text-decoration: none;
}

<div class="container">
  <div class="spotlight_numbers-v2">
    <ul>
      <li><a href="#">Doctors</a>
      </li>
      <li><a href="#">Hospital</a>
      </li>
      <li><a href="#">Articles</a>
      </li>
      <li><a href="#">Drugs</a>
      </li>
      <li><a href="#">Interview</a>
      </li>
    </ul>
  </div>
</div>