Skip to content

Automatic Scrolling behaviour not taking into account ScrollContainer position #3099

@Nexxtron

Description

@Nexxtron

Subject of the issue

The automatic scrolling behaviour (when you drag an item to the top or bottom to trigger a scroll) only works when parent scroll container is positioned at y=0 because the updateScrollPosition is only looking at rect.top < 0 instead of looking at the rect.top < scrollcontainer.top

static updateScrollPosition(el: HTMLElement, position: {top: number}, distance: number): void {
    // is widget in view?
    const rect = el.getBoundingClientRect();
    const innerHeightOrClientHeight = (window.innerHeight || document.documentElement.clientHeight);
    if (rect.top < 0 || rect.bottom > innerHeightOrClientHeight)
    ...
}

For now this fixed it by overwriting the function in my app:

// Gridstack Scroll-Fix Patch when scrollcontainer is at another position on the screen (ex. top 120px)
	(function patchGridstackScrollBehavior() {
		const proto = GridStack.Utils as any;

		proto.updateScrollPosition = function (
			el: HTMLElement,
			position: { top: number },
			distance: number
		): void {
			const scrollEl = this.getScrollElement(el);
			if (!scrollEl) return;

			const elRect = el.getBoundingClientRect();
			const scrollRect = scrollEl.getBoundingClientRect();

			const offsetDiffDown = elRect.bottom - scrollRect.bottom;
			const offsetDiffUp = elRect.top - scrollRect.top;

			const prevScroll = scrollEl.scrollTop;

			if (offsetDiffUp < 0 && distance < 0) {
				// scroll up
				if (el.offsetHeight > scrollRect.height) {
					scrollEl.scrollTop += distance;
				} else {
					scrollEl.scrollTop +=
						Math.abs(offsetDiffUp) > Math.abs(distance) ? distance : offsetDiffUp;
				}
			} else if (offsetDiffDown > 0 && distance > 0) {
				// scroll down
				if (el.offsetHeight > scrollRect.height) {
					scrollEl.scrollTop += distance;
				} else {
					scrollEl.scrollTop += offsetDiffDown > distance ? distance : offsetDiffDown;
				}
			}

			position.top += scrollEl.scrollTop - prevScroll;
		};
	})();

Your environment

gridstack.js version: "12.2.2"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions