diff --git a/core/modules/widgets/scrollable.js b/core/modules/widgets/scrollable.js index c2acc563d..b77d6a12b 100644 --- a/core/modules/widgets/scrollable.js +++ b/core/modules/widgets/scrollable.js @@ -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); }); } }; diff --git a/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid b/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid index d31eb6e31..6c52f0025 100644 --- a/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid @@ -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."""/>