From 4948edccebcdd983e42e253ef1ca0a41292e18c0 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Sun, 14 Jul 2024 23:16:19 +0200 Subject: [PATCH 1/3] Ensure Feed maintains scroll position --- panel/models/column.ts | 6 ++++++ panel/models/feed.ts | 14 ++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/panel/models/column.ts b/panel/models/column.ts index a050e67c69..477859697f 100644 --- a/panel/models/column.ts +++ b/panel/models/column.ts @@ -12,6 +12,7 @@ export class ScrollButtonClick extends ModelEvent { export class ColumnView extends BkColumnView { declare model: Column + _updating: boolean = false scroll_down_button_el: HTMLElement @@ -30,6 +31,9 @@ export class ColumnView extends BkColumnView { } scroll_to_position(): void { + if (this._updating) { + return + } requestAnimationFrame(() => { this.el.scrollTo({top: this.model.scroll_position, behavior: "instant"}) }) @@ -56,7 +60,9 @@ export class ColumnView extends BkColumnView { } record_scroll_position(): void { + this._updating = true this.model.scroll_position = Math.round(this.el.scrollTop) + this._updating = false } toggle_scroll_button(): void { diff --git a/panel/models/feed.ts b/panel/models/feed.ts index c2231724f3..0e5feb3a63 100644 --- a/panel/models/feed.ts +++ b/panel/models/feed.ts @@ -2,12 +2,13 @@ import {Column, ColumnView} from "./column" import type * as p from "@bokehjs/core/properties" import {build_views} from "@bokehjs/core/build_views" import type {UIElementView} from "@bokehjs/models/ui/ui_element" +import {ColumnView as BkColumnView} from "@bokehjs/models/layouts/column" export class FeedView extends ColumnView { declare model: Feed - _intersection_observer: IntersectionObserver _last_visible: UIElementView | null + _lock: any = null _sync: boolean override initialize(): void { @@ -54,10 +55,19 @@ export class FeedView extends ColumnView { } override async update_children(): Promise { + const last = this._last_visible + const scroll_top = this.el.scrollTop + const before_offset = last?.el.offsetTop || 0 this._sync = false await super.update_children() this._sync = true - this._last_visible?.el.scrollIntoView(true) + requestAnimationFrame(() => { + const after_offset = last?.el.offsetTop || 0 + const offset = (after_offset-before_offset) + if (offset > 0) { + this.el.scrollTo({top: scroll_top + offset, behavior: "instant"}) + } + }) } override async build_child_views(): Promise { From b23106ff533e19678617ec3c52b49ecbce93dd34 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 16 Jul 2024 09:17:49 +0200 Subject: [PATCH 2/3] Apply suggestions from code review --- panel/models/feed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/models/feed.ts b/panel/models/feed.ts index 0e5feb3a63..cc171884d9 100644 --- a/panel/models/feed.ts +++ b/panel/models/feed.ts @@ -65,7 +65,7 @@ export class FeedView extends ColumnView { const after_offset = last?.el.offsetTop || 0 const offset = (after_offset-before_offset) if (offset > 0) { - this.el.scrollTo({top: scroll_top + offset, behavior: "instant"}) + this.el.scrollTo({top: scroll_top + offset, behavior: "instant"}) } }) } From f7a85d84da5ac1be897c7114601cc63876b5e278 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 16 Jul 2024 09:31:14 +0200 Subject: [PATCH 3/3] Apply suggestions from code review --- panel/models/feed.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/panel/models/feed.ts b/panel/models/feed.ts index cc171884d9..6b5418909e 100644 --- a/panel/models/feed.ts +++ b/panel/models/feed.ts @@ -2,7 +2,6 @@ import {Column, ColumnView} from "./column" import type * as p from "@bokehjs/core/properties" import {build_views} from "@bokehjs/core/build_views" import type {UIElementView} from "@bokehjs/models/ui/ui_element" -import {ColumnView as BkColumnView} from "@bokehjs/models/layouts/column" export class FeedView extends ColumnView { declare model: Feed