How to drag a custom scrollbar?

[alvarindev]

Hello,
I'm using Lenis with a custom scrollbar as we can see here:

https://codesandbox.io/s/vanilla-custom-scrollbar-ecbfey?file=/src/index.js

(This is an example from arzafram that asked the question time ago)

The thing is, how can I manually move the scrollbar by clicking and dragging ? (as usual behaviour). My scrollbar is inserted like:

function insert_scrollbar_html() {
 
    $scrollbar_html = '
    <div class="scrollbar">
        <div class="inner">
            <div class="thumb" id="thumb"></div>
        </div>
    </div>';


    echo $scrollbar_html;
}

and then my current code to modify is the following...

var scrollbar = document.querySelector('.scrollbar');
var thumb = document.querySelector('#thumb');


var mouseDown = false;
var startY;
var startScrollTop;


thumb.addEventListener('mousedown', function(e) {
  mouseDown = true;
  startY = e.clientY; // cursor position-initial
  startScrollTop = scrollbar.scrollTop; //bar position-initial
});


document.addEventListener('mousemove', function(e) {
  if (!mouseDown) return;
  
  var y = e.clientY;
  var delta = y - startY; // y cursor displacement
  scrollbar.scrollTop = startScrollTop + delta; // update the position of the bar, here maybe I need to call scrollTo method?


document.addEventListener('mouseup', function(e) {

  mouseDown = false;
});

[alvarindev]

Solved using gsap and draggable:

let smoothmm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
smoothmm.add("(min-width: 1366px)", () => {
  console.log("smooth activado");
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    orientation: "vertical", // vertical, horizontal
    gestureOrientation: "vertical", // vertical, horizontal, both
    smoothWheel: true,
    // mouseMultiplier: 1,
    smoothTouch: false,
    smoothWheel: true,
    // touchMultiplier: 2,
    infinite: false,
  });

  const thumb = document.getElementById("thumb");
  // console.log("thumb", thumb);
  const thumbHeight = thumb.getBoundingClientRect().height;

  lenis.on("scroll", ({ scrollvar, limit, velocity, direction, progress }) => {
    thumb.style.transform = `translate3d(0,${
      progress * (window.innerHeight - thumbHeight)
    }px,0)`;
    ScrollTrigger.update();
  });

  function raf(time) {
    lenis.raf(time);
    // ScrollTrigger.update();
    requestAnimationFrame(raf);
  }

  // lenis.on("scroll", ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  requestAnimationFrame(raf);
  // const thumb = document.getElementById("thumb");
  const inner = document.querySelector(".inner");

  // Calcula la altura máxima de desplazamiento del pulgar
  const maxThumbScroll = inner.clientHeight - thumb.clientHeight;

  // Crea una instancia de arrastre con GSAP Draggable
  Draggable.create(thumb, {
    type: "y",
    bounds: inner,
    onDrag: function () {
      // Calcula el progreso de desplazamiento según la posición del pulgar
      const progress = this.y / maxThumbScroll;

      // Calcula el nuevo desplazamiento de Lenis
      const newScroll = progress * lenis.limit;

      // Aplica el desplazamiento a Lenis
      lenis.scrollTo(newScroll, { immediate: true });
    },
  });

  // Sincroniza la posición del pulgar con Lenis
  lenis.on("scroll", ({ scroll, limit }) => {
    const progress = scroll / limit;
    gsap.to(thumb, { y: progress * maxThumbScroll, duration: 0 });
  });
});