mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-24 06:13:17 +00:00
Code Issues Releases Wiki Activity

Simplify page scrolling behaviour

Browse Source 
Fixes #2180
This commit is contained in:
Jermolene 2018-01-30 11:29:07 +00:00
parent 7534a97518
commit 1c8170463c
1 changed files with 24 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
core/modules/utils/dom/scroller.js
View File

@ -54,51 +54,35 @@ PageScroller.prototype.handleEvent = function(event) {
Handle a scroll event hitting the page document Handle a scroll event hitting the page document
*/ */
PageScroller.prototype.scrollIntoView = function(element) { PageScroller.prototype.scrollIntoView = function(element) {
var duration = $tw.utils.getAnimationDuration(); var self = this,
duration = $tw.utils.getAnimationDuration();
// Now get ready to scroll the body // Now get ready to scroll the body
this.cancelScroll(); this.cancelScroll();
this.startTime = Date.now(); this.startTime = Date.now();
var scrollPosition = $tw.utils.getScrollPosition();
// Get the client bounds of the element and adjust by the scroll position // Get the client bounds of the element and adjust by the scroll position
var clientBounds = element.getBoundingClientRect(), var getBounds = function() {
bounds = { var clientBounds = element.getBoundingClientRect(),
left: clientBounds.left + scrollPosition.x, scrollPosition = $tw.utils.getScrollPosition();
top: clientBounds.top + scrollPosition.y, return {
width: clientBounds.width, left: clientBounds.left + scrollPosition.x,
height: clientBounds.height top: clientBounds.top + scrollPosition.y,
}; width: clientBounds.width,
// We'll consider the horizontal and vertical scroll directions separately via this function height: clientBounds.height
// targetPos/targetSize - position and size of the target element };
// currentPos/currentSize - position and size of the current scroll viewport },
// returns: new position of the scroll viewport // We'll consider the horizontal and vertical scroll directions separately via this function
var getEndPos = function(targetPos,targetSize,currentPos,currentSize) { // targetPos/targetSize - position and size of the target element
var newPos = currentPos; // currentPos/currentSize - position and size of the current scroll viewport
// If the target is above/left of the current view, then scroll to it's top/left // returns: new position of the scroll viewport
if(targetPos <= currentPos) { getEndPos = function(targetPos,targetSize,currentPos,currentSize) {
newPos = targetPos; var newPos = targetPos;
// If the target is smaller than the window and the scroll position is too far up, then scroll till the target is at the bottom of the window
} else if(targetSize < currentSize && currentPos < (targetPos + targetSize - currentSize)) {
newPos = targetPos + targetSize - currentSize;
// If the target is big, then just scroll to the top
} else if(currentPos < targetPos) {
newPos = targetPos;
// Otherwise, stay where we are
} else {
newPos = currentPos;
}
// If we are scrolling within 50 pixels of the top/left then snap to zero // If we are scrolling within 50 pixels of the top/left then snap to zero
if(newPos < 50) { if(newPos < 50) {
newPos = 0; newPos = 0;
} }
return newPos; return newPos;
}, },
endX = getEndPos(bounds.left,bounds.width,scrollPosition.x,window.innerWidth), drawFrame = function drawFrame() {
endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,window.innerHeight);
// Only scroll if the position has changed
if(endX !== scrollPosition.x || endY !== scrollPosition.y) {
var self = this,
drawFrame;
drawFrame = function () {
var t; var t;
if(duration <= 0) { if(duration <= 0) {
t = 1; t = 1;
@ -110,13 +94,16 @@ PageScroller.prototype.scrollIntoView = function(element) {
t = 1; t = 1;
} }
t = $tw.utils.slowInSlowOut(t); t = $tw.utils.slowInSlowOut(t);
var scrollPosition = $tw.utils.getScrollPosition(),
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);
if(t < 1) { if(t < 1) {
self.idRequestFrame = self.requestAnimationFrame.call(window,drawFrame); self.idRequestFrame = self.requestAnimationFrame.call(window,drawFrame);
} }
}; };
drawFrame(); drawFrame();
}
}; };
exports.PageScroller = PageScroller; exports.PageScroller = PageScroller;