Let me show you a simple illustration of the task I'm attempting to accomplish:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#box {
background-color: red;
width: 200px;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
cursor: grab;
}
#box div {
background-color: blue;
margin: 30px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>For those using a mobile device, navigating through #box is as simple as touching and swiping up or down. However, for desktop users, the scrolling process has to be done either by using the scrollbar or the mouse scroll wheel.
Is there a way to implement scrolling by grabbing (i.e. clicking and holding the left mouse button) and then dragging (i.e. moving the mouse) up or down? Can this issue be addressed using CSS alone?