Skip to content

scroll fix inside parent #3252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Mar 31, 2026
+20 −11
Merged

scroll fix inside parent #3252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions demo/two.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,21 @@
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.with-lines { border: 1px dotted #777}
.scroll-container {
max-height: 500px;
overflow-y: auto;
border: 2px solid #aaa;
border-radius: 4px;
padding: 10px;
}
</style>

<script src="../dist/gridstack-all.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Two grids demo</h1>
<p>Two grids, one floating one not, showing drag&drop from sidebar and between grids.
<h1>Two grids demo, with scroll containers</h1>
<p>Two grids, one floating one not, showing drag&drop from sidebar and between grids. Using scoll containers to test.
<br>New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</p>

<div class="row">
Expand Down Expand Up @@ -51,11 +58,14 @@ <h1>Two grids demo</h1>
<div class="col-md-6">
<a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: true</a>
<a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
<div class="grid-stack" id="left_grid"></div>
<div class="scroll-container">
<div class="grid-stack" id="left_grid"></div>
</div>
</div>
<div class="col-md-6">
<a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: false</a>
<a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
page scroll test
<div class="grid-stack" id="right_grid"></div>
</div>
</div>
Expand All @@ -68,7 +78,7 @@ <h1>Two grids demo</h1>
{x: 1, y: 1}, // intentional overlap to test collision on load
{x: 3, y: 1},
{x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'},
{x: 2, y: 5}
{x: 2, y: 5, h:20}
];
items.forEach((item, i) => item.content = item.content || String(i));

Expand Down
2 changes: 1 addition & 1 deletion doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ Change log
## 12.4.3 (TBD)
* fix: [#3237](https://github.com/gridstack/gridstack.js/pull/3237) updateOptions() fixes for columnOpts, maxRow. load() not cloning
* fix: [#3241](https://github.com/gridstack/gridstack.js/pull/3241) drifting rounding issue when cellHeight is small/fraction
* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188) scroll speed too high
* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188), [#2074](https://github.com/gridstack/gridstack.js/issues/2074) scroll speed too high, not animating, not using container parent

## 12.4.2 (2025-12-26)
* regression: [#3214](https://github.com/gridstack/gridstack.js/issues/3214) touch device with real mouse event fix (caused by #3191 in last release)
Expand Down
11 changes: 5 additions & 6 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3035,9 +3035,10 @@ export class GridStack {
return 0;
}

/** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container */
/** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container.
* Uses the grid's own element to find the scroll container so external/sidebar drags work too (#2074). */
protected _updateScrollPosition(el: HTMLElement): void {
const scrollEl = Utils.getScrollElement(el);
const scrollEl = Utils.getScrollElement(this.el);
if (!scrollEl) return;
this._autoScrollEl = el;
this._autoScrollContainer = scrollEl;
Expand All @@ -3059,12 +3060,10 @@ export class GridStack {
const clipping = this._getClipping(el, scrollEl);
if (clipping === 0) { this._stopScrolling(); return; }

const scrollRect = scrollEl.getBoundingClientRect();
const viewportH = window.innerHeight || document.documentElement.clientHeight;
const containerH = Math.min(scrollRect.height, viewportH);
const maxSpeed = Math.max(containerH / 75, 2);
const maxSpeed = Math.max(viewportH / 75, 4);
const absPx = Math.abs(clipping);
const speed = Math.min(absPx * 0.3, maxSpeed);
const speed = Math.min(absPx * 0.6, maxSpeed);
const scrollAmount = clipping > 0 ? speed : -speed;

const prevScroll = scrollEl.scrollTop;
Expand Down