Quick Fix: This problem cannot be solved using only CSS. However, it can be solved by using javascript. An implementation which works for both horizontal and vertical scrolling is provided below. The scroll speed can also be changed.
The Solutions:
Solution 1: Event listeners for mouse down, up and mouse move
This solution uses JavaScript to add mouse events to the element you want to enable scrolling behavior on. It sets up event listeners for mouse down, mouse up, and mouse move events. When the user presses and holds the left mouse button (mouse down event), it records the current mouse position and the current scroll position of the element.
As the user moves the mouse (mouse move event), it calculates the difference between the current mouse position and the initial position when the mouse button was pressed. It then uses this difference to update the scroll position of the element by the same amount in the opposite direction.
When the user releases the mouse button (mouse up event), it stops updating the scroll position.
Here is the code to implement this solution:
<head>
<style>
#box {
background-color: red;
width: 200px;
height: 250px;
overflow: scroll;
}
#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>
<script>
const box = document.getElementById('box');
let isDown = false;
let startX;
let startY;
let scrollLeft;
let scrollTop;
box.addEventListener('mousedown', (e) => {
isDown = true;
startX = e.pageX - box.offsetLeft;
startY = e.pageY - box.offsetTop;
scrollLeft = box.scrollLeft;
startTime = Date.now();
});
box.addEventListener('mouseup', () => {
isDown = false;
startTime = null;
});
box.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - box.offsetLeft;
const y = e.pageY - box.offsetTop;
const walkX = (x - startX) * 5; // Change this number to adjust the scroll speed
const walkY = (y - startY) * 5; // Change this number to adjust the scroll speed
box.scrollLeft = scrollLeft - walkX;
box.startTime = startTime - walkY;
});
</script>
</body>
</html>
Q&A
How can I enable touch-like scrolling by grabbing and dragging with a mouse?
—
This cannot be solved with CSS only, however it can be solved using javascript.
Can I enable scrolling by grabbing (i.e. pressing and holding the left mouse button) and then dragging (i.e. moving the mouse) up or down?
—
Yes, you can solve it using javascript.
Video Explanation:
The following video, titled "Hacking Figma prototypes with overlays, components, and frames ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
Join Figma Designer advocates Tom Lowry and Rogie King as they dive deep into some lesser known capabilities using Figma's prototyping tools ...
