1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

Optionally adjust scroll targets to allow for a top menu bar

Fixes #3396
This commit is contained in:
Jermolene 2018-08-16 12:07:50 +01:00
parent f210b75a30
commit 8a38685de9
2 changed files with 17 additions and 1 deletions

View File

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

View File

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