How to hide the horizontal scroll bar while scrolling in mobile

Question

I have some lists that I am displaying in one line on desktop but on mobile, I have to display the same but it should be horizontally scrollable by swiping.

I tried the below code using CSS. It's working but I don't want to show the horizontal scroll bar while scrolling. Also, I am using bootstrap 4 so I added my list inside the container.

Would you help me out in this?

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  .aboutlinks ul {
    display: flex;
     overflow-x: hidden;
  }
}

<div class="aboutlinks">
  <ul class="smothscrollclass">
    <li><a href="" class="">ABCDE</a></li>
    <li><a href="">FGHIJ</a></li>
    <li><a href="">KLMNO</a></li>
    <li><a href="">PQRST</a></li>
    <li><a href="">UVWX</a></li>
    <li><a href="">XY</a></li>
  </ul>
</div>

`overflow-x: hidden` It hides the scrollbar, but still allows scrolling by swiping — Rory McCrossan, Jun 11 '19 at 15:28
You've already included it, but you've got it set to `scroll`. Change it to hidden — Rory McCrossan, Jun 11 '19 at 15:33
@RoryMcCrossan, I tried overflow-x:hidden ; but it's not working. — questionbank, Jun 11 '19 at 15:36
@RoryMcCrossan, I think, My question is different because the duplicate question is talking about the scroll bar. I am also talking about the scroll with swiping but not to show the scroll bar. — questionbank, Jun 11 '19 at 15:41
But the solution is not working after adding the hidden to the overflow-x — questionbank, Jun 11 '19 at 15:44

User863 · Answer 1 · 2019-06-15T10:36:17.510

Using ::-webkit-scrollbar CSS pseudo-element (for webkit browsers) and scrollbar-color property (for Firefox)

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  .aboutlinks ul {
    display: flex;
    overflow-x: auto;
  }
  .no-scrollbar {
    scrollbar-color: transparent transparent;  
  }
  .no-scrollbar::-webkit-scrollbar {
    height: 0px;
  }
  .no-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0);
  }
}

<div class="aboutlinks">
  <ul class="smothscrollclass no-scrollbar">
    <li><a href="" class="">ABCDE</a></li>
    <li><a href="">FGHIJ</a></li>
    <li><a href="">KLMNO</a></li>
    <li><a href="">PQRST</a></li>
    <li><a href="">UVWX</a></li>
    <li><a href="">XY</a></li>
  </ul>
</div>

Note: Use shift + mouse wheel or touch gesture to scroll

Thanks for the answer, Give me some time to implement your answer with my code. I will update you in some time. — questionbank, Jun 15 '19 at 10:26
I haven't tested your code yet..due to some issues. I will update here. — questionbank, Jun 17 '19 at 13:28

Evik Ghazarian · Answer 2 · 2019-06-11T16:07:32.753

0

overflow-x: hidden; will fix your issue. on the body, not on the container. see the updated answer below:

.aboutlinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutlinks ul li {
  display: inline-block;
  margin: 15px;
  border: 1px solid #000;
}

.aboutlinks ul li a {
  padding: 6px 25px;
  display: block;
}

@media all and (max-width: 768px) {
  body{
    overflow-x: hidden; // add this part
  }
  .aboutlinks ul {
    display: flex;
    //dont put any overflow here
  }
}

<div class="aboutlinks">
  <ul class="smothscrollclass">
    <li><a href="" class="">ABCDE</a></li>
    <li><a href="">FGHIJ</a></li>
    <li><a href="">KLMNO</a></li>
    <li><a href="">PQRST</a></li>
    <li><a href="">UVWX</a></li>
    <li><a href="">XY</a></li>
  </ul>
</div>

edited Jun 11 '19 at 16:07

answered Jun 11 '19 at 15:29

Evik Ghazarian

1,803
1
9
24

Give me some time to check – questionbank Jun 11 '19 at 15:33
Is it working from your side? because it's not working from my side. my lists are fixed and when I am swiping then nothing is happing. – questionbank Jun 11 '19 at 15:38
updated the answer moved the overflow-x to body instead of .aboutlinks ul – – Evik Ghazarian Jun 11 '19 at 16:08
but horizontal scroll bar is displaying at the bottom. – questionbank Jun 11 '19 at 16:11
I dont see any horizontal scroll bar on my side. run the script here. Do you see any horizontal scrollbar? I don't see any on firefox, chrome, safari – Evik Ghazarian Jun 11 '19 at 16:16
I am using iPhone 6s and I checked on safari at the bottom it's displaying a horizontal scroll bar and one more thing I have to swipe the list. Now I can swipe anywhere on the body. – questionbank Jun 11 '19 at 16:23
Please check my updated question, I have added the screenshot of my phone with scrollbar at the bottom. – questionbank Jun 11 '19 at 16:38
Any more help in this? – questionbank Jun 13 '19 at 04:24

How to hide the horizontal scroll bar while scrolling in mobile

2 Answers2

Linked