Handling snap issues with use:dragscroll

[Paintersrp]

export function dragscroll(node, param = {}) {
  let isDown = false;
  /** @type {number} */
  let startX;
  /** @type {number} */
  let startY;
  /** @type {number} */
  let scrollLeft;
  /** @type {number} */
  let scrollTop;
  let { enabled, axes, events, cursor, snap, snapOffset } = resolveConfig(param);

  /**
   * @param {PointerEvent | MouseEvent} e
   */
  function handlePointerDown(e) {
    changeCursor(true);
    isDown = true;
    startX = e.pageX - node.offsetLeft;
    scrollLeft = node.scrollLeft;
    startY = e.pageY - node.offsetTop;
    scrollTop = node.scrollTop;
    if (snap) node.style.scrollSnapType = 'none';
  }

  function handlePointerUpAndLeave() {
    changeCursor();
    isDown = false;

    /** Calculates the closest child of the element and snaps to it, if enabled */
    if (snap) {
      const closestSnapPoint = calculateClosestSnapPoint();

      node.scrollTo({ left: closestSnapPoint - snapOffset, behavior: 'smooth' });
    }
  }

  /** Calculates the closest child to snap to */
  function calculateClosestSnapPoint() {
    const children = node.children;
    let closestDistance = Infinity;
    let closestPoint = 0;

    Array.from(children).forEach((child) => {
      const rect = child.getBoundingClientRect();
      const distance = Math.abs(node.scrollLeft - (rect.left + node.scrollLeft));
      if (distance < closestDistance) {
        closestDistance = distance;
        closestPoint = rect.left + node.scrollLeft;
      }
    });

    return closestPoint;
  }
  
  /** No more changes to the file below these lines */

I noticed there were some issues with the use:draggable when dealing with an element that also uses a scroll-snap-type. With these changes, the dragging behaves like normal by removing any scroll-snap-type during dragging, then resetting and snapping to the nearest child when released as normal. I added a snap boolean parameter and a snapOffset to adjust how much to offset any snapping to match the styling.

So far I haven't really noticed any negatives or hiccups, so if anyone else happens to run into issues with a scroll-snap-type, try this and hopefully it will help you out.

<div
  class="media-scroller snaps-inline"
  use:dragscroll={{ axis: 'x', snap: true, snapOffset: 20 }
>

[vnphanquang]

@Paintersrp Thank you much for the detailed suggestion. I will look into it soon 🙏. Not sure why you closed this, a mistake perhaps?

[emzo]

Hope this gets implemented soon. use:dragscroll is amazing for adding extra functionality to CSS only snap-scroll sliders/carousels. This addition would make this process more slick.