Horizontal Click and Drag Scrolling with JS

horizontal-click-and-drag-scrolling-with-js.markdown

Horizontal Click and Drag Scrolling with JS

A Pen by Alex Gallegos on CodePen.

License.

index.html

<div class="list-x">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>
 

script.js

const slider = document.querySelector('.list-x');
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) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

style.css

//GET THE GOOGLE FONT SPECIMEN
@import url(https://fonts.googleapis.com/css?family=Rubik);

body,
html {
  color: #fff;
  text-align: center;
  background: #FFF;
  font-family: Helvetica, sans-serif;
  margin: 0;
}

.list-x {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all 0.2s;
  /*transform: scale(0.98);*/
  will-change: transform;
  user-select: none;
  cursor: pointer;
}

.list-x.active {
  background: rgba(255, 255, 255, 0.3);
  cursor: grabbing;
  cursor: -webkit-grabbing;
  /*transform: scale(0.99);*/
}

.item {
  display: inline-block;
  background: skyblue;
  min-height: 150px;
  min-width: 200px;
  margin: 2px 5px;
  border-radius: 10px;

  -webkit-box-shadow: inset 0px 0px 6px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 6px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 6px -2px rgba(0, 0, 0, 0.75);
  
  -webkit-transition: 0.2s ease-in-out 0s;
	-moz-transition   : 0.2s ease-in-out 0s;
	-o-transition     : 0.2s ease-in-out 0s;
}

.list-x.active .item {
  -webkit-box-shadow: inset 0px 0px 12px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 12px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 12px -2px rgba(0, 0, 0, 0.75);
}

If the element item is a full link, like for example

<a class='item item-1 display-block' href='#someUrl'>My Block content</a>
<a class='item item-2 display-block' href='#someUrl'>My Block content</a>
<a class='item item-3 display-block' href='#someUrl'>My Block content</a>

Unfortunately, when we release the click right above the item, we will be redirected to the url when releasing the drag.

How to prevent clicking when finished dragging, but can still click without dragging?

To prevent clicking when finished dragging, you have to cancel the click with preventDefault() if the mouse has moved. Here is the updated code:

const slider = document.querySelector('.list-x');
const links = document.querySelectorAll('.list-x a');
let isDown = false;
let move = 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;
});

for (let i = 0; i < links.length; i++) {
	links[i].addEventListener("click", function(e) {
		if (move) {
			e.preventDefault();
		}
	});
	links[i].addEventListener('mousedown', (e) => {
		move = false;
	});
	links[i].addEventListener('mousemove', (e) => {
		move = true;
	});
}

To prevent accidental clicking when dragging, Here is the updated code:

class HorizontalScrollDragger {
  constructor(element) {
    this.slider = typeof element === 'string' ? document.querySelector(element) : element instanceof Element ? element : null;
    if (this.slider === null) return console.error('HorizontalScrollDragger: Element not found');

    this.isDown = false;
    this.preventClick = false;
    this.startX;
    this.scrollLeft;

    this.init();
  }

  init() {
    this.slider.addEventListener('mousedown', (e) => this.handleMouseDown(e));
    this.slider.addEventListener('mouseleave', () => this.handleMouseLeave());
    this.slider.addEventListener('mouseup', () => this.handleMouseUp());
    this.slider.addEventListener('mousemove', (e) => this.handleMouseMove(e));
    this.slider.addEventListener('click', (e) => this.handleClick(e));
  }

  handleMouseDown(e) {
    this.isDown = true;
    this.slider.classList.add('active');
    this.startX = e.pageX - this.slider.offsetLeft;
    this.scrollLeft = this.slider.scrollLeft;
    this.preventClick = false;
  }

  handleMouseLeave() {
    this.isDown = false;
    this.slider.classList.remove('active');
  }

  handleMouseUp() {
    this.isDown = false;
    this.slider.classList.remove('active');
  }

  handleMouseMove(e) {
    if (!this.isDown) return;
    e.preventDefault();
    const x = e.pageX - this.slider.offsetLeft;
    const walk = (x - this.startX) * 3; //scroll-fast
    this.slider.scrollLeft = this.scrollLeft - walk;
    this.preventClick = true;
  }

  handleClick(e) {
    if (this.preventClick) {
      e.preventDefault();
    }
  }
}

new HorizontalScrollDragger('.list-x');

// const element = document.querySelector('.list-x');
// new HorizontalScrollDragger(element);

// document.querySelectorAll('[data-horizontal-scroller]').forEach(el => {
//   new HorizontalScrollDragger(el);
// })