CSS - 如何在没有滚动条的情况下水平滚动答案

【问题标题】：CSS - how to be able to scroll horizontally without scrollbarCSS - 如何在没有滚动条的情况下水平滚动
【发布时间】：2022-12-17 13:14:24
【问题描述】：

我正在制作带有内部按钮的导航栏我之前已经通过垂直滚动（隐藏滚动条）完成了此操作，我尝试过使用水平滚动导航栏但我只能垂直滚动而不是水平滚动有没有办法，请有人帮忙

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

【问题讨论】：

这回答了你的问题了吗？ Hide scroll bar, but while still being able to scroll

标签： css

【解决方案1】：

添加属性

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

使用 shift + 鼠标滚轮滚动

但使用 javascript 避免按 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>

【讨论】：