-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Closed
Description
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
Labels
No labels