CSS - how to be able to scroll horizontally without scrollbar-CodePudding

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  id="options-All">All</button>
<button >Islamic</button>
<button >Educational</button>
<button >Arts & Creative</button>
<button >TV & Media</button>
<button >Arabic</button>
<button >Urdu</button>
<button >Hindi</button>
<button >Turkish</button>
<button >English</button>
<button >Ideas</button>
<button >Business</button>
<button >Legal</button>
<button >IT & Tech</button>
<button >knowledge</button>
<button >Health</button>
<button >Ask For Something</button>
<button >Human Resourses</button>
<button >Other</button>
</nav>
</body>
</html>

CodePudding user response：

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  id="options-All">All</button>
<button >Islamic</button>
<button >Educational</button>
<button >Arts & Creative</button>
<button >TV & Media</button>
<button >Arabic</button>
<button >Urdu</button>
<button >Hindi</button>
<button >Turkish</button>
<button >English</button>
<button >Ideas</button>
<button >Business</button>
<button >Legal</button>
<button >IT & Tech</button>
<button >knowledge</button>
<button >Health</button>
<button >Ask For Something</button>
<button >Human Resourses</button>
<button >Other</button>
</nav>
</body>
</html>