Drag to scroll - A simple way to scroll sideways on desktop

Trello is a popular application where you can use the mouse to drag scroll to the right and left.

A horizontal layout of lists is important in Trello, since lists often signify phases of a project and moving cards left to right implies progression. We had early beta versions that put overflowing lists on a new line. It totally ruined the visual metaphor. This means that with a lot of lists, some get hidden and you need to scroll horizontally to see them. Horizontal scrolling can be a pain, especially with a mouse where you’ve got a tiny scrollbar to hunt down.

So we added a new drag-to-scroll feature that makes it much easier. Just find an open place on the board and drag horizontally. The board will scroll with your mouse. It’s easier and more fun. I find myself dragging boards even though I have a trackpad that makes scrolling easy. https://blog.trello.com/cutting-out-friction

On mobile it is easy to scroll left and right.

On laptops with good trackpads it is easy to scroll sideways.

Only on desktop is not easy to scroll sideways, you are often left to click the scrollbar and drag it sideways.

Some hack the browser so that scroll downwards equals to scroll sideways, Apple has done that before which gives a weird effect as the page has to be equally long to have the right scrollbar position.

And since most develop to the common denominator for desktop webapps, vertical scroll is never used in new apps where it could be applicable.

I acknowledge that downwards scroll is easier and preferable, but sideways scroll is superior when you have to compare different stuff.

I searched the forum but couldn’t find anything about “drag to scroll” or “scroll vertical”

Vertical scroll can be achieved with javascript like this, where you need to remember overflow-y: auto:

app.innerHTML = `
<div class="scroll" style="overflow-y: auto; cursor: pointer;">
<div style="display: flex;width: 2000px">
  Sideways content
</div>
</div>`;

const slider = document.querySelector(".scroll");
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("mousedown", e => {
  isDown = true;
  slider.classList.add("active");
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
  isDown = false;
  slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
  isDown = false;
  slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = x - startX;
  slider.scrollLeft = scrollLeft - walk;
});

You can see an example app that implement this here: https://kevinsimper.github.io/yearly-calendar-overview/

It would be nice with some kind of native solution to easy allow drag to scroll in new apps without having to implement a custom solution for something that is a problem only on desktop with mouse. It is a handicap to use a mouse in these applications today that is made for touch.

I don’t know if this should be a CSS or HTML feature, I would lean towards css as we already control some scrolling behavior with overflow today.

Links to articles about vertical scrolling:

Hmm. Interesting. Sounds like this is covered for touch manipulations with touch-action, but perhaps a corollary with something like ‘mouse-action’ could be useful.

I also wanted to mention that many hardware mice also have a [seldom-used?] horizontal scroll function built into the mouse wheel (tilt left/right to scroll). I use it when needed, but wonder if many folks just don’t know about it?

CSSWG related issue:

Yeah with touch it works out of the box if the box has overflow, no code is needed.

You are right, but on hardware mices that has that feature it is very weird as it has acceleration often and in my experience very unprecise.

Thank you for linking that issue, I hadn’t found that in my searching

This works great, clicking and dragging to scroll horizontally. However, when clicking and dragging elements within the draggable area (images, text, links, etc.), those elements become selected / highlighted. Images actually stop the click-and-drag scrolling function. Any idea how to prevent this? My horizontal slider is primarily linked images. Thanks for the code thus far!