Horizontal Scroll

by davidxmartins

HTML

<div class="scroll js-scroll">
  <div class="scroll__container js-filter-container">
    <div class="scroll__content js-content">
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
    </div>
    <div class="scroll__content js-content">
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#" class="scroll__element js-element">
        <img class="img scroll__image" src="https://source.unsplash.com/random" />
      </a>
      <a href="#"...

CSS

body {
  margin: 0;
}

.scroll {
  display: flex;
  align-items: center;
  height: 100vh;
}

.scroll__container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 15px;
  grid-auto-flow: column;
}

.scroll__content {
  display: flex;
  align-items: flex-end;
}

.scroll__element {
  display: inline-block;
  position: relative;
  margin-right: 15px;
}

.scroll__image {
  width: 400px;
  height: 200px;
  object-fit: cover;
}

JavaScript

class HorizontalScroll {
  constructor() {
    this.scrollContainer = document.querySelector('.js-scroll');
    this.target = (document.documentElement || document.body.parentNode || document.body);

    this.state = {
      moving: false,
      scrollDir: '',
      scrollPos: this.target.scrollLeft,
      scrollTop: 0,
      speed: 90,
      smooth: 12
    };

    this.rAF = null;
    
    this.scroll = this.scroll.bind(this);
    this.updateScrollPosition = this.updateScrollPosition.bind(this);
  }

  scroll(e) {
    e.preventDefault();

    // update scroll direction
    if (this.state.scrollPos > this.state.scrollTop) this.state.scrollDir = 'down';
    else this.state.scrollDir = 'up';

    this.state.scrollTop = this.state.scrollPos <= 0 ? 0 : this.state.scrollPos;
    
    console.log(this.target.scrollLeft);

    // smooth scroll
    let delta;
    if (e.detail) {
      if (e.wheelDelta) delta = e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1);
      else delta = -e.detail / 3;
    } else {
      delta = e.wheelDelta / 120;
    }

    this.state.scrollPos += -delta * this.state.speed;
    this.state.scrollPos = Math.max(
      0,
      Math.min(this.state.scrollPos, this.target.scrollWidth - this.target.clientWidth)
    );
    
    if (!this.state.moving) this.updateScrollPosition();
  }

  updateScrollPosition() {
    this.state.moving = true;

    const delta = (this.state.scrollPos - this.target.scrollLeft) / this.state.smooth;
    
    console.log(delta);

    this.target.scrollLeft += delta;

    if (Math.abs(delta) > 0) window.requestAnimationFrame(this.updateScrollPosition);
    else this.state.moving = false;
  }

  init() {
    window.addEventListener('wheel', this.scroll, { passive: false });
    window.addEventListener('DOMMouseScroll', this.scroll, { passive: false });
    console.log(this.target);
    
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
 
if (document.attachEvent) {
   ...