diff --git a/core/modules/utils/dom/scroller.js b/core/modules/utils/dom/scroller.js index 4da7c1cba..00210d268 100644 --- a/core/modules/utils/dom/scroller.js +++ b/core/modules/utils/dom/scroller.js @@ -59,6 +59,12 @@ PageScroller.prototype.scrollIntoView = function(element) { // Now get ready to scroll the body this.cancelScroll(); this.startTime = Date.now(); + // Get the height of any position:fixed toolbars + var toolbar = document.querySelector(".tc-adjust-top-of-scroll"), + offset = 0; + if(toolbar) { + offset = parseInt(window.getComputedStyle(toolbar).offsetHeight,10); + } // Get the client bounds of the element and adjust by the scroll position var getBounds = function() { var clientBounds = element.getBoundingClientRect(), @@ -98,7 +104,7 @@ PageScroller.prototype.scrollIntoView = function(element) { bounds = getBounds(), endX = getEndPos(bounds.left,bounds.width,scrollPosition.x,window.innerWidth), endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,window.innerHeight); - window.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t); + window.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t - offset); if(t < 1) { self.idRequestFrame = self.requestAnimationFrame.call(window,drawFrame); } diff --git a/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Scroll Top Adjustment.tid b/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Scroll Top Adjustment.tid new file mode 100644 index 000000000..f29a5035b --- /dev/null +++ b/editions/tw5.com/tiddlers/hiddensettings/Hidden Setting_ Scroll Top Adjustment.tid @@ -0,0 +1,10 @@ +created: 20180816105911495 +modified: 20180816110627713 +tags: [[Hidden Settings]] +title: Hidden Setting: Scroll Top Adjustment +type: text/vnd.tiddlywiki + +As part of navigating to a tiddler, TiddlyWiki scrolls the page so that the top of the tiddler lines up with the top of the browser window. This means that the upper part of tiddlers can be obscured when using custom `position:fixed` toolbars at the top of the window. + +To adjust the scroll position to allow for the toolbar, add the CSS class `tc-adjust-top-of-scroll` to the toolbar. TiddlyWiki's scrolling mechanism will then dynamically adjust the scroll position by the height of that element. +