Optionally adjust scroll targets to allow for a top menu bar

Fixes #3396
single-tiddler-mode
Jermolene 2018-08-16 12:07:50 +01:00
rodzic f210b75a30
commit 8a38685de9
2 zmienionych plików z 17 dodań i 1 usunięć

Wyświetl plik

@ -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);
}

Wyświetl plik

@ -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.