mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-30 10:58:31 -05:00
FIX: Entering a topic at the bottom would cause scroll jumps
This commit is contained in:
parent
06a5df63d3
commit
f854eebc5f
4 changed files with 40 additions and 45 deletions
|
@ -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);
|
|
|
@ -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 = [];
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue