depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix when scroll animate duration greater than debounce will cause scrolling flicking

Browse source
This commit is contained in:
Cheng-Han, Wu 2016-05-28 00:31:43 +08:00
parent 5c861fd51e
commit 5819e4007f
1 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
public/js/syncscroll.js
View file

@ -115,10 +115,7 @@ var viewScrollThrottle = 10;
var buildMapThrottle = 100; var buildMapThrottle = 100;
var viewScrolling = false; var viewScrolling = false;
var viewScrollingDebounce = 200;
var editScrolling = false; var editScrolling = false;
var editScrollingDebounce = 200;
ui.area.codemirrorScroll.on('scroll', _.throttle(syncScrollToView, editScrollThrottle)); ui.area.codemirrorScroll.on('scroll', _.throttle(syncScrollToView, editScrollThrottle));
ui.area.view.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle)); ui.area.view.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle));
@ -214,12 +211,8 @@ function buildMapInner(callback) {
if (loaded && callback) callback(); if (loaded && callback) callback();
} }
// sync view scroll progress to edit // sync view scroll progress to edit
var viewScrollingTimeout = _.debounce(viewScrollingTimeoutInner, viewScrollingDebounce); var viewScrollingTimer = null;
function viewScrollingTimeoutInner() {
viewScrolling = false;
}
function syncScrollToEdit(e) { function syncScrollToEdit(e) {
if (currentMode != modeType.both || !syncscroll) return; if (currentMode != modeType.both || !syncscroll) return;
@ -280,20 +273,22 @@ function syncScrollToEdit(e) {
var posDiff = Math.abs(scrollInfo.top - posTo); var posDiff = Math.abs(scrollInfo.top - posTo);
var duration = posDiff / 50; var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100;
ui.area.codemirrorScroll.stop(true, true).animate({ ui.area.codemirrorScroll.stop(true, true).animate({
scrollTop: posTo scrollTop: posTo
}, duration >= 100 ? duration : 100, "linear"); }, duration, "linear");
viewScrolling = true; viewScrolling = true;
viewScrollingTimeout(); clearTimeout(viewScrollingTimer);
viewScrollingTimer = setTimeout(viewScrollingTimeoutInner, duration * 1.2);
}
function viewScrollingTimeoutInner() {
viewScrolling = false;
} }
// sync edit scroll progress to view // sync edit scroll progress to view
var editScrollingTimeout = _.debounce(editScrollingTimeoutInner, editScrollingDebounce); var editScrollingTimer = null;
function editScrollingTimeoutInner() {
editScrolling = false;
}
function syncScrollToView(event, _lineNo) { function syncScrollToView(event, _lineNo) {
if (currentMode != modeType.both || !syncscroll) return; if (currentMode != modeType.both || !syncscroll) return;
@ -336,10 +331,16 @@ function syncScrollToView(event, _lineNo) {
var posDiff = Math.abs(ui.area.view.scrollTop() - posTo); var posDiff = Math.abs(ui.area.view.scrollTop() - posTo);
var duration = posDiff / 50; var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100;
ui.area.view.stop(true, true).animate({ ui.area.view.stop(true, true).animate({
scrollTop: posTo scrollTop: posTo
}, duration >= 100 ? duration : 100, "linear"); }, duration, "linear");
editScrolling = true; editScrolling = true;
editScrollingTimeout(); clearTimeout(editScrollingTimer);
editScrollingTimer = setTimeout(editScrollingTimeoutInner, duration * 1.2);
}
function editScrollingTimeoutInner() {
editScrolling = false;
} }