Glitchy scroll beyond page width, autoscroll not helping

[georgekettle]

Wondering if anyone has had this issue before?

Using AutoScroll, it sometimes works and other times does not (See video for idea on how it is failing)

I've attached below, my JS setup and included the html for the scroll issue. I'm guessing someone has run into this before. Let me know if there is anymore code needed to understand the problem, cheers ☺️

https://github.com/SortableJS/Sortable/assets/34521157/99ec9e2d-ee70-42e3-b027-0a47e103c2f2

import { Controller } from "@hotwired/stimulus";
import { patch } from "@rails/request.js";
import { Sortable, AutoScroll } from "sortablejs/modular/sortable.core.esm.js";

Sortable.mount(new AutoScroll());

export default class extends Controller {
  static values = { 
    group: String,
    draggable: String,
    delay: {
      type: Number,
      default: 200,
    },
    delayOnTouchOnly: {
      type: Boolean,
      default: true,
    },
  };

  connect() {
    const options = {
      animation: 200,
      ghostClass: "sortable-ghost",
      delay: this.delayValue,
	    delayOnTouchOnly: this.delayOnTouchOnlyValue,
      forceFallback: true,
      fallbackClass: "sortable-dragging",
      fallbackTolerance: 1,
      group: this.groupValue,
      onEnd: this.onEnd.bind(this),
      emptyInsertThreshold: 50,
      
      // AutoScroll settings
      scroll: true, // Enable the plugin. Can be HTMLElement.
      forceAutoscrollFallback: true, // force autoscroll plugin to enable even when native browser autoscroll is available
      scrollSensitivity: 40, // px, how near the mouse must be to an edge to start scrolling.
      scrollSpeed: 20, // px, speed of the scrolling
      bubbleScroll: true // apply autoscroll to all parent elements, allowing for easier movement
    };
    this.hasDraggableValue && (options.draggable = this.draggableValue);
    this.sortable = Sortable.create(this.element, options);
  }

  onEnd(event) {
    // Call api to update position
    const { item, newIndex, to: newList } = event;
    const url = newList.dataset.sortableUrl;
    const itemId = item.dataset.sortableId

    patch(url, { body: JSON.stringify({ id: itemId, position: newIndex + 1 }) });
  }
}

[vldfokin]

Try adding a page wrapper with position: relative and overflow: hidden