Scrolling with Transform

Copiado dos scroller da -> https://emergencemagazine.org/

by Hugo Vale Pereira

HTML

<div class="container">
  <div class="grid">
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
    <div class="column">
      <div class="picture"></div>
    </div>
  </div>
</div>

SASS

.container
  position: absolute
  width: 100vw
  height: 100vh
  
  background: red
  
  overflow: hidden
  //pointer-events: none
  touch-action: none
  
 
  
  .grid
    display: grid
    grid-auto-flow: column
    grid-auto-columns: auto
    height: 100%
    width: 100vw
    transform: translateX(0)
    
    
    .column
      width: 100px
      background: yellow
      margin: 0 5px
      transition:  0.5s
      
      
 
      
      
        
      &:active
        //width: 0

JavaScript

document.querySelector(".container").addEventListener('wheel', e => {
	e.preventDefault();
	
  let element = document.querySelector(".grid");
  
  let val = getTranslateValues(element);
 
  element.style.transform=`translateX(${(parseInt(val.x) + e.deltaX) }px)`
  
})

document.querySelector(".container").addEventListener('touchmove', (e) => {
  e.preventDefault();
	console.log(e);
  let element = document.querySelector(".grid");
  
  let val = getTranslateValues(element);
 
  element.style.transform=`translateX(${(parseInt(val.x) + e.deltaX) }px)`
});





/**
 * From -> https://zellwk.com/blog/css-translate-values-in-javascript/
 * Gets computed translate values
 * @param {HTMLElement} element
 * @returns {Object}
 */
function getTranslateValues (element) {
  const style = window.getComputedStyle(element)
  const matrix = style['transform'] || style.webkitTransform || style.mozTransform

  // No transform property. Simply return 0 values.
  if (matrix === 'none' || typeof matrix === 'undefined') {
    return {
      x: 0,
      y: 0,
      z: 0
    }
  }

  // Can either be 2d or 3d transform
  const matrixType = matrix.includes('3d') ? '3d' : '2d'
  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ')

  // 2d matrices have 6 values
  // Last 2 values are X and Y.
  // 2d matrices does not have Z value.
  if (matrixType === '2d') {
    return {
      x: matrixValues[4],
      y: matrixValues[5],
      z: 0
    }
  }

  // 3d matrices have 16 values
  // The 13th, 14th, and 15th values are X, Y, and Z
  if (matrixType === '3d') {
    return {
      x: matrixValues[12],
      y: matrixValues[13],
      z: matrixValues[14]
    }
  }
}