Solving Scroll Issues with Nestable Containers and Draggable Lists

TL;DR

• Experiencing a strange auto-scroll issue where the scroll container references a parent.
• Found inconsistent drag behavior with unified list and scroll container setup.
• Refactored the unified list to act as its own scroll container to tackle the problem.
• Changed the draggable context handling, which led to new onscroll errors.
• Current focus: Fixing this.props.onscroll error and ensuring styling consistency.

Diving deep into a scrolling bug, I discovered the nestable scroll container was using its parent’s reference for calculating scroll height, instead of its own. This made drag-and-drop operations unpredictable.

Initially, dragging worked only in one direction based on prior drag operations, which added to the confusion. The breakthrough came when wrapping a unified list component itself became its own scroll container. This required some refactoring but seemed necessary to fix the issue without recreating redundant containers.

Finally, I adjusted the component structure to have the draggable aspect wrapped in its scroll context while simplifying the section container. This led to new issues like this.props.onscroll is not a function error. Although it’s throwing frequently now, it feels like the adjustments are leading in the right direction. Next step: focus on resolving the new error and maintaining styling.