CSS - how to be able to scroll horizontally without scrollbar

Question

i am making nav bar with buttons inside i have done this before with vertical scrolling (hide scrollbar), i tried it with horizontal scrolling nav bar but i can only scroll vertically not horizontally is there a way, please someone help

<html>
<head>
<style>
#navigationBar {
border: 1px solid;
border-right: none;
border-left: none;
height: 40px;
background: white;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
-ms-overflow-style: none;
}
#navigationBar::-webkit-scrollbar { 
height: 0px;
}
.options {
font-size: 15px;
padding: 6;
margin: 4;
font-family: monospace;
border-radius: 15px;
border: 1px solid;
height: 32px;;
max-width: 100%;
white-space: nowrap;
}
</style>
</head>
<body>
<nav id="navigationBar">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
</nav>
</body>
</html>

Does this answer your question? [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) — Dmytro Demianenko, Dec 12 '22 at 15:05

Matias Bertoni · Accepted Answer · 2022-12-12T15:16:46.233

add properties

-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */

do scroll with shift + mouse wheel

but with javascript avoid pressing shift

const scrollContainer = document.querySelector("#navigationBar");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

<html>
<head>
<style>
#navigationBar {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
border: 1px solid;
border-right: none;
border-left: none;
height: 40px;
background: white;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
-ms-overflow-style: none;
}
#navigationBar::-webkit-scrollbar { 
height: 0px;
}
.options {
font-size: 15px;
padding: 6;
margin: 4;
font-family: monospace;
border-radius: 15px;
border: 1px solid;
height: 32px;;
max-width: 100%;
white-space: nowrap;
}
</style>
</head>
<body>
<nav id="navigationBar">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
</nav>
</body>
</html>

CSS - how to be able to scroll horizontally without scrollbar

1 Answers1