Manipulative Scroll

by Hugo Vale Pereira

HTML

<div class="container">
  
  <div class="mover">
    <h1 style="font-size: 3em">SCROLL ME</h1>

    <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="svg_2" pathLength="1000" d="m90,116c0,-45.12206 38.73451,-70 69,-70c30.26549,0 90,24.9697 90,91c0,66.0303 24.98936,135 72,135c47.01064,0 120,-15.55294 120,-84c0,-68.44706 -71,-59.37664 -71,-26c0,33.37664 55.71998,120 88,120" opacity="NaN" stroke="#000" fill="#fff"/>
 </g>

</svg>

  </div>
  <div class="scrollableContent"></div>
 
</div>

CSS

.container {
 
  width: 100vw;
  height: 50vh;
  outline: 1px solid red;
  overflow: auto;
}

.scrollableContent {
  width: 2000px;
  height: 2000px;
  pointer-events: none;
}

.mover {
  position: sticky;
  width: 100%;
  height: 100%;
  background: blue;
  top: 0px;
  left: 0;

  &:hover {
    background: green;
  }
}

.mover svg *{ 
  fill: none;
  stroke-width: 10px;
  stroke-dashoffset: 0;
  stroke-dasharray: 10 1000;

  &:hover{
    stroke: coral;
    cursor: alias;
  }
}

JavaScript

window.addEventListener('pointerdown', (e)=>console.log(e.target.className));
window.addEventListener('pointerup', ()=>console.log('up'));
window.addEventListener('touchstart', ()=>console.log('tdown'));
window.addEventListener('touchend', ()=>console.log('tup'));


const container = document.querySelector('.container')
const mover = document.querySelector('.mover')
const path = document.querySelector('path')
container.addEventListener('scroll', (e)=>{
  console.log(e.target.scrollLeft)
  path.style.strokeDasharray=`${e.target.scrollLeft + e.target.scrollTop} 1000`
  //mover.style.left=e.target.scrollLeft+'px';
})