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>
Post a Comment for "How To Hide The Horizontal Scroll Bar While Scrolling In Mobile"