View on GitHub

JS30

a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.

27-click-drag-scroll

demo gif

Back to home page

User stories

Notes

Should we scroll

We use isDown as a flag to determines whether we should allow scrolling.

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

slider.addEventListener("mousedown", e => {
 isDown = true;
 slider.classList.add("active"); //the pop up effect when clicked
 startX = e.pageX - slider.offsetLeft; //make sure we are clicking the div
 scrollLeft = slider.scrollLeft; //starting point for X when click
});

slider.addEventListener("mouseleave", () => {
 isDown = false;
 slider.classList.remove("active");
});

slider.addEventListener("mouseup", () => {
 isDown = false;
 slider.classList.remove("active");
});

A CSS class active will be added if allow:

.items.active {
 background: rgba(255, 255, 255, 0.3);
 cursor: grabbing;
 cursor: -webkit-grabbing;
 transform: scale(1);
}

Scroll

Do the math to calculate how far we should scroll:

When user drags, slider.scrollLeft = scrollLeft - walk, where:

slider.addEventListener("mousemove", e => {
 if (!isDown) return; //stop the function from running
 e.preventDefault(); //avoid selecting other element
 const x = e.pageX - slider.offsetLeft; //changing X when drag
 const walk = (x - startX) * 3; //how many X do we move, every pixel moves, scroll the slider three pixels
 slider.scrollLeft = scrollLeft - walk;
});