Swipe LI from left to right without CSS or JS scrolling?

Question

I am trying to scroll LIfrom left to right on a mobile phone, and I just did it with CSS, I know that it can be easily done with any plugin, but I can’t use any plugin in my project, here is the JSfiddle demo that I created, the basic requirement is to remove this scrollbar from the bottom, on the mobile phone, so that the scrollbar appears when you touch the content area.

If I make a parent div overflow:hidden, then I cannot skip.

.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;
}

<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>

Run codeHide result

Please suggest

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>

Hide result