My goal is to enable users to scroll in the web view similar to how they can drag to scroll on mobile devices
Check out my sandbox here for reference
I have created a sample sandbox with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
.wrapper {
display: flex;
gap: 100px;
overflow: scroll;
}
.wrapper::-webkit-scrollbar {
width: 0px;
}
</style>
<body>
<div class="wrapper">
<div style="width: 50px;">box 1</div>
<div style="width: 50px;">box 2</div>
<div style="width: 50px;">box 3</div>
<div style="width: 50px;">box 4</div>
<div style="width: 50px;">box 5</div>
<div style="width: 50px;">box 6</div>
<div style="width: 50px;">box 7</div>
<div style="width: 50px;">box 8</div>
<div style="width: 50px;">box 9</div>
</div>
</body>
</html>
Essentially, I utilized overflow: scroll; and customized scrollbar width within wrapper::-webkit-scrollbar
However, I am seeking a method to replicate the mobile scrolling behavior in web without a visible scrollbar
I want my horizontal UI to remain sleek and neat while still allowing for dragging interaction on the webI noticed that Netflix uses navigation arrows in their web interface. Is this the only way to implement horizontal scrolling on the web?