javascript - How to enable touch-like scrolling by grabbing and dragging with the mouse?

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 finefoot 11.4k12 gold badges76 silver badges122 bronze badges

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to enable touch-like scrolling by grabbing and dragging with the mouse? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)