From c61c34e9df09bab7215a4c0b7a5c04d239341088 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Wed, 29 Nov 2023 14:45:34 +0000
Subject: [PATCH] Debounce scrollable widget scroll handler

---
 core/modules/widgets/scrollable.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/core/modules/widgets/scrollable.js b/core/modules/widgets/scrollable.js
index 7733308a8..c2acc563d 100644
--- a/core/modules/widgets/scrollable.js
+++ b/core/modules/widgets/scrollable.js
@@ -176,16 +176,23 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
 		// After a delay for rendering, scroll to the bound position
 		setTimeout(this.updateScrollPositionFromBoundTiddler.bind(this),50);
 		// Save scroll position on DOM scroll event
+		var timeout;
 		this.outerDomNode.addEventListener("scroll",function(event) {
-			var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
-				newTiddlerFields = {
-					title: self.scrollableBind,
-					"scroll-left": self.outerDomNode.scrollLeft.toString(),
-					"scroll-top": self.outerDomNode.scrollTop.toString()
-				};
-			if(!existingTiddler || (existingTiddler.fields["title"] !== newTiddlerFields["title"]) || (existingTiddler.fields["scroll-left"] !== newTiddlerFields["scroll-left"] || existingTiddler.fields["scroll-top"] !== newTiddlerFields["scroll-top"])) {
-				self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields));
+			if(timeout) {
+				window.cancelAnimationFrame(timeout);
+				timeout = null;
 			}
+			timeout = window.requestAnimationFrame(function() {
+				var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
+					newTiddlerFields = {
+						title: self.scrollableBind,
+						"scroll-left": self.outerDomNode.scrollLeft.toString(),
+						"scroll-top": self.outerDomNode.scrollTop.toString()
+					};
+				if(!existingTiddler || (existingTiddler.fields["title"] !== newTiddlerFields["title"]) || (existingTiddler.fields["scroll-left"] !== newTiddlerFields["scroll-left"] || existingTiddler.fields["scroll-top"] !== newTiddlerFields["scroll-top"])) {
+					self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields));
+				}
+			});
 		});
 	}
 };