Extend tm-scroll to accept CSS selector to identify the target

core/modules/utils/dom/scroller.js

@@ -49,7 +49,12 @@ Handle an event
 */
 PageScroller.prototype.handleEvent = function(event) {
 	if(event.type === "tm-scroll") {
-		return this.scrollIntoView(event.target);
+		if(event.paramObject && event.paramObject.selector) {
+			this.scrollSelectorIntoView(null,event.paramObject.selector);
+		} else {
+			this.scrollIntoView(event.target);			
+		}
+		return false; // Event was handled
 	}
 	return true;
 };
@@ -117,6 +122,14 @@ PageScroller.prototype.scrollIntoView = function(element,callback) {
 	drawFrame();
 };
 
+PageScroller.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) {
+	baseElement = baseElement || document.body;
+	var element = baseElement.querySelector(selector);
+	if(element) {
+		this.scrollIntoView(element,callback);		
+	}
+};
+
 exports.PageScroller = PageScroller;
 
 })();

core/modules/widgets/scrollable.js

@@ -58,7 +58,11 @@ ScrollableWidget.prototype.handleScrollEvent = function(event) {
 	if(this.outerDomNode.scrollWidth <= this.outerDomNode.offsetWidth && this.outerDomNode.scrollHeight <= this.outerDomNode.offsetHeight && this.fallthrough === "yes") {
 		return true;
 	}
-	this.scrollIntoView(event.target);
+	if(event.paramObject && event.paramObject.selector) {
+		this.scrollSelectorIntoView(null,event.paramObject.selector);
+	} else {
+		this.scrollIntoView(event.target);			
+	}
 	return false; // Handled event
 };
 
@@ -130,6 +134,14 @@ ScrollableWidget.prototype.scrollIntoView = function(element) {
 	}
 };
 
+ScrollableWidget.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) {
+	baseElement = baseElement || document.body;
+	var element = baseElement.querySelector(selector);
+	if(element) {
+		this.scrollIntoView(element,callback);		
+	}
+};
+
 /*
 Render this widget into the DOM
 */

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid

@@ -1,6 +1,6 @@
 caption: tm-scroll
 created: 20160425000906330
-modified: 20160425001655166
+modified: 20201014152456174
 tags: Messages
 title: WidgetMessage: tm-scroll
 type: text/vnd.tiddlywiki
@@ -8,6 +8,5 @@ type: text/vnd.tiddlywiki
 The `tm-scroll` message causes the surrounding scrollable container to scroll to the specified DOM node into view. The `tm-scroll` is handled in various places in the core itself, but can also be handled by a [[ScrollableWidget]].
 
 |!Name |!Description |
-|target |Target DOM node the scrollable container should scroll to. |
-
-Due to the nature of the parameter, the `tm-scroll` can only be generated within javascript code.
+|target |Target DOM node the scrollable container should scroll to (note that this parameter can only be set via JavaScript code) |
+|selector |<<.from-version "5.1.23">> Optional string [[CSS selector|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors]] as an alternate means of identifying the target DOM node |