How To Hide The Horizontal Scroll Bar While Scrolling In Mobile

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

Solution 1:

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

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

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

.aboutlinksullia {
  padding: 6px25px;
  display: block;
}

@media all and (max-width: 768px) {
  .aboutlinksul {
    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 000rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 000rgba(0, 0, 0, 0);
  }
  .no-scrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0);
  }
}

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

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

Solution 2:

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

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

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

.aboutlinksullia {
  padding: 6px25px;
  display: block;
}

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

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