Here is a minimal example of what I'm trying to do:
<!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>Here is a minimal example of what I'm trying to do:
<!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>If you're on mobile, you will be able to scroll through #box by touching and dragging up or down. However, if you're on a desktop browser, then you will have to use the scrollbar or the mouse scroll wheel.
How 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? Can I solve it with CSS only?
Share Improve this question asked Apr 20, 2023 at 16:59 finefootfinefoot 11.4k12 gold badges76 silver badges122 bronze badges 1- 1 You cannot solve with CSS. Here's a guide for implementing with JavaScript: htmldom.dev/drag-to-scroll – Samuel Newman Commented Apr 20, 2023 at 17:01
1 Answer
Reset to default 4This cannot be solved with CSS only, however it can be solved using javascript. I made an implementation for you which works both horizontally and vertically. It is also possible to changed the scroll speed.
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;
scrollTop = box.scrollTop;
box.style.cursor = 'grabbing';
});
box.addEventListener('mouseleave', () => {
isDown = false;
box.style.cursor = 'grab';
});
box.addEventListener('mouseup', () => {
isDown = false;
box.style.cursor = 'grab';
});
document.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - box.offsetLeft;
const y = e.pageY - box.offsetTop;
const walkX = (x - startX) * 1; // Change this number to adjust the scroll speed
const walkY = (y - startY) * 1; // Change this number to adjust the scroll speed
box.scrollLeft = scrollLeft - walkX;
box.scrollTop = scrollTop - walkY;
});#box {
background-color: red;
width: 200px;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
}
#box div {
background-color: blue;
margin: 30px;
width: 100px;
height: 100px;
}<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745497832a4630272.html
评论列表（0条）