FIX: Entering a topic at the bottom would cause scroll jumps

This commit is contained in:
Robin Ward 2016-05-27 16:14:06 -04:00
parent 06a5df63d3
commit f854eebc5f
No known key found for this signature in database
GPG key ID: 0E091E2B4ED1B83D
4 changed files with 40 additions and 45 deletions

View file

@ -16,75 +16,70 @@
// 1. onbeforeunload ensure we are scrolled to the right spot // 1. onbeforeunload ensure we are scrolled to the right spot
// 2. give up on the scrollbar and implement it ourselves (something that will happen) // 2. give up on the scrollbar and implement it ourselves (something that will happen)
(function (exports) { const SCROLL_EVENTS = "scroll.lock-on touchmove.lock-on mousedown.lock-on wheel.lock-on DOMMouseScroll.lock-on mousewheel.lock-on keyup.lock-on";
var scrollEvents = "scroll.lock-on touchmove.lock-on mousedown.lock-on wheel.lock-on DOMMouseScroll.lock-on mousewheel.lock-on keyup.lock-on"; function within(threshold, x, y) {
return Math.abs(x-y) < threshold;
}
var LockOn = function(selector, options) { export default class LockOn {
constructor(selector, options) {
this.selector = selector; this.selector = selector;
this.options = options || {}; this.options = options || {};
}; this.offsetTop = null;
}
LockOn.prototype.elementTop = function() { elementTop() {
var offsetCalculator = this.options.offsetCalculator, const offsetCalculator = this.options.offsetCalculator;
selected = $(this.selector); if (this.offsetTop === null) {
this.offsetTop = offsetCalculator ? offsetCalculator() : 0;
if (selected && selected.offset && selected.offset()) {
return selected.offset().top - (offsetCalculator ? offsetCalculator() : 0);
} }
};
LockOn.prototype.lock = function() { const selected = $(this.selector);
var self = this, if (selected && selected.offset && selected.offset()) {
previousTop = this.elementTop(), return selected.offset().top - this.offsetTop;
startedAt = new Date().getTime(), }
i = 0; }
clearLock(interval) {
$('body,html').off(SCROLL_EVENTS);
clearInterval(interval);
}
lock() {
let previousTop = this.elementTop();
const startedAt = new Date().getTime();
$(window).scrollTop(previousTop); $(window).scrollTop(previousTop);
var within = function(threshold,x,y) { let i = 0;
return Math.abs(x-y) < threshold; const interval = setInterval(() => {
};
var interval = setInterval(function() {
i = i + 1; i = i + 1;
var top = self.elementTop(), const top = this.elementTop();
scrollTop = $(window).scrollTop(); const scrollTop = $(window).scrollTop();
if (typeof(top) === "undefined") { if (typeof(top) === "undefined") {
$('body,html').off(scrollEvents); return this.clearLock(interval);
clearInterval(interval);
return;
} }
if (!within(4, top, previousTop) || !within(4, scrollTop, top)) { if (!within(4, top, previousTop) || !within(4, scrollTop, top)) {
console.log(top, previousTop, scrollTop);
$(window).scrollTop(top); $(window).scrollTop(top);
// animating = true;
// $('html,body').animate({scrollTop: parseInt(top,10)+'px'}, 200, 'swing', function(){
// animating = false;
// });
previousTop = top; previousTop = top;
} }
// We commit suicide after 3s just to clean up // We commit suicide after 3s just to clean up
var nowTime = new Date().getTime(); const nowTime = new Date().getTime();
if (nowTime - startedAt > 1000) { if (nowTime - startedAt > 1000) {
$('body,html').off(scrollEvents); return this.clearLock(interval);
clearInterval(interval);
} }
}, 50); }, 50);
$('body,html').off(scrollEvents).on(scrollEvents, function(e){ $('body,html').off(SCROLL_EVENTS).on(SCROLL_EVENTS, e => {
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel" || e.type === "touchmove") { if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel" || e.type === "touchmove") {
$('body,html').off(scrollEvents); this.clearLock(interval);
clearInterval(interval);
} }
}); });
}
}; }
exports.LockOn = LockOn;
})(window);

View file

@ -1,6 +1,6 @@
import offsetCalculator from 'discourse/lib/offset-calculator'; import offsetCalculator from 'discourse/lib/offset-calculator';
import LockOn from 'discourse/lib/lock-on';
/*global LockOn:true*/
let _jumpScheduled = false; let _jumpScheduled = false;
const rewrites = []; const rewrites = [];

View file

@ -11,6 +11,7 @@
//= require ./discourse/lib/notification-levels //= require ./discourse/lib/notification-levels
//= require ./discourse/lib/app-events //= require ./discourse/lib/app-events
//= require ./discourse/lib/offset-calculator //= require ./discourse/lib/offset-calculator
//= require ./discourse/lib/lock-on
//= require ./discourse/lib/url //= require ./discourse/lib/url
//= require ./discourse/lib/debounce //= require ./discourse/lib/debounce
//= require ./discourse/lib/quote //= require ./discourse/lib/quote

View file

@ -34,7 +34,6 @@
//= require mousetrap.js //= require mousetrap.js
//= require rsvp.js //= require rsvp.js
//= require show-html.js //= require show-html.js
//= require lock-on.js
//= require break_string //= require break_string
//= require buffered-proxy //= require buffered-proxy
//= require jquery.autoellipsis-1.0.10.min.js //= require jquery.autoellipsis-1.0.10.min.js