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>>Solution :
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>