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);
}

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);
// })