diff --git a/public/res/extensions/scrollSync.js b/public/res/extensions/scrollSync.js
index 1c5bf3bd..4e272a3f 100644
--- a/public/res/extensions/scrollSync.js
+++ b/public/res/extensions/scrollSync.js
@@ -91,7 +91,6 @@ define([
var isScrollPreview = false;
var isEditorMoving = false;
var isPreviewMoving = false;
- var scrollingHelper = $('
');
function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
// Find the section corresponding to the offset
var sectionIndex;
@@ -108,6 +107,34 @@ define([
return destSection.startOffset + destSection.height * posInSection;
}
+ var timeoutId;
+ var currentEndCb;
+ function animate(elt, startValue, endValue, stepCb, endCb) {
+ if(currentEndCb) {
+ clearTimeout(timeoutId);
+ currentEndCb();
+ }
+ currentEndCb = endCb;
+ var diff = endValue - startValue;
+ var startTime = Date.now();
+ function tick() {
+ var currentTime = Date.now();
+ var progress = (currentTime - startTime) / 200;
+ if(progress < 1) {
+ var scrollTop = startValue + diff * Math.cos((1 - progress) * Math.PI / 2 );
+ elt.scrollTop = scrollTop;
+ stepCb(scrollTop);
+ timeoutId = setTimeout(tick, 1);
+ }
+ else {
+ currentEndCb = undefined;
+ elt.scrollTop = endValue;
+ endCb();
+ }
+ }
+ tick();
+ }
+
var doScrollSync = _.throttle(function() {
if(!isPreviewVisible || mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
return;
@@ -134,24 +161,12 @@ define([
lastPreviewScrollTop = previewScrollTop;
return;
}
- scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
- value: destScrollTop - previewScrollTop
- }, {
- easing: 'easeOutSine',
- duration: 200,
- queue: 'scrollSyncFx',
- step: function(now) {
- isPreviewMoving = true;
- lastPreviewScrollTop = previewScrollTop + now;
- $previewElt.scrollTop(lastPreviewScrollTop);
- },
- done: function() {
- setTimeout(function() {
- isPreviewMoving = false;
- }, 10);
- },
- }).dequeue('scrollSyncFx');
-
+ animate($previewElt[0], previewScrollTop, destScrollTop, function(currentScrollTop) {
+ isPreviewMoving = true;
+ lastPreviewScrollTop = currentScrollTop;
+ }, function() {
+ isPreviewMoving = false;
+ });
}
else if(isScrollPreview === true) {
if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
@@ -170,23 +185,12 @@ define([
lastEditorScrollTop = editorScrollTop;
return;
}
- scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
- value: destScrollTop - editorScrollTop
- }, {
- easing: 'easeOutSine',
- duration: 200,
- queue: 'scrollSyncFx',
- step: function(now) {
- isEditorMoving = true;
- lastEditorScrollTop = editorScrollTop + now;
- $editorElt.scrollTop(lastEditorScrollTop);
- },
- done: function() {
- setTimeout(function() {
- isEditorMoving = false;
- }, 10);
- },
- }).dequeue('scrollSyncFx');
+ animate($editorElt[0], editorScrollTop, destScrollTop, function(currentScrollTop) {
+ isEditorMoving = true;
+ lastEditorScrollTop = currentScrollTop;
+ }, function() {
+ isEditorMoving = false;
+ });
}
}, 100);