closes #1716, #1717

public/src/modules/composer.js

@@ -263,8 +263,14 @@ define('composer', dependencies, function(taskbar, controls, uploads, formatting
 					preview.render(postContainer);
 				});
 
+				bodyEl.on('scroll', function() {
+					preview.matchScroll(postContainer);
+				})
+
 				bodyEl.val(draft ? draft : postData.body);
-				preview.render(postContainer);
+				preview.render(postContainer, function() {
+					preview.matchScroll(postContainer);
+				});
 				drafts.init(postContainer, postData);
 
 				handleResize(postContainer);

public/src/modules/composer/preview.js

@@ -5,17 +5,42 @@
 define('composer/preview', function() {
 	var preview = {};
 
-	preview.render = function(postContainer) {
+	var timeoutId = 0;
 
+	preview.render = function(postContainer, callback) {
+		callback = callback || function() {};
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = 0;
+		}
 		var textarea = postContainer.find('textarea');
-		socket.emit('modules.composer.renderPreview', textarea.val(), function(err, preview) {
+
-			if (err) {
+		timeoutId = setTimeout(function() {
-				return;
+			socket.emit('modules.composer.renderPreview', textarea.val(), function(err, preview) {
-			}
+				timeoutId = 0;
-			preview = $(preview);
+				if (err) {
-			preview.find('img').addClass('img-responsive');
+					return;
-			postContainer.find('.preview').html(preview);
+				}
-		});
+				preview = $(preview);
+				preview.find('img').addClass('img-responsive');
+				postContainer.find('.preview').html(preview);
+				callback();
+			});
+		}, 250);
+	};
+
+	preview.matchScroll = function(postContainer) {
+		var textarea = postContainer.find('textarea');
+		var preview = postContainer.find('.preview');
+		var diff = textarea[0].scrollHeight - textarea.height();
+
+		if (diff === 0) {
+			return;
+		}
+
+		var scrollPercent = textarea.scrollTop() / diff;
+
+		preview.scrollTop(Math.max(preview[0].scrollHeight - preview.height(), 0) * scrollPercent);
 	};
 
 	return preview;