Defer scrollable widget updating bound tiddler for 100ms

See discussion https://talk.tiddlywiki.org/t/5-3-2pre-scroll-binding/8570/3?u=jeremyruston
This commit is contained in:
Jeremy Ruston 2023-11-29 18:06:54 +00:00
parent c61c34e9df
commit f7359671aa
2 changed files with 6 additions and 4 deletions

View File

@ -12,6 +12,8 @@ Scrollable widget
/*global $tw: false */
"use strict";
var DEBOUNCE_INTERVAL = 100; // Delay after last scroll event before updating the bound tiddler
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var ScrollableWidget = function(parseTreeNode,options) {
@ -179,10 +181,10 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
var timeout;
this.outerDomNode.addEventListener("scroll",function(event) {
if(timeout) {
window.cancelAnimationFrame(timeout);
clearTimeout(timeout);
timeout = null;
}
timeout = window.requestAnimationFrame(function() {
timeout = setTimeout(function() {
var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
newTiddlerFields = {
title: self.scrollableBind,
@ -192,7 +194,7 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
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));
}
});
},DEBOUNCE_INTERVAL);
});
}
};

View File

@ -18,7 +18,7 @@ The content of the `<$scrollable>` widget is displayed within a pair of wrapper
|fallthrough |See below |
|bind |<<.from-version "5.3.2">> Optional title of tiddler to which the scroll position should be bound |
Binding the scroll position to a tiddler automatically copies the scroll coordinates into the `scroll-left` and `scroll-top` fields as scrolling occurs. Conversely, setting those field values will automatically cause the scrollable to scroll if it can.
Binding the scroll position to a tiddler automatically copies the scroll coordinates into the `scroll-left` and `scroll-top` fields after scrolling occurs. Conversely, setting those field values will automatically cause the scrollable to scroll if it can.
<$macrocall $name=".note" _="""If a scrollable widget can't handle the `tm-scroll` message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the ''fallthrough'' attribute to `no` prevents this behaviour."""/>