Use jquery.scrollSync.js jQuery plugin

to synchronize the scroll position between the #wmd-input
and #wmd-preview

index.html

@@ -77,6 +77,7 @@
 <script type="text/javascript" src="mathjax-editing_writing.js"></script>
 <!-- <script type="text/javascript" src="jspdf.min.js"></script> -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<script src="jquery.scrollSync.js"></script>
 <input id="openFileInput" type="file" />
 <div id="wmd-button-bar" class="wmd-button-bar"></div>
 <textarea id="wmd-input" class="column wmd-input" spellcheck="false"></textarea>
@@ -130,6 +131,8 @@
 </div>
 
 <script type="text/javascript">
+$("#wmd-input, #wmd-preview").scrollSync();
+
 togglemathjax = function(enabled) {
     if (enabled) {
         if (!latexenabledonce)

jquery.scrollSync.js

@@ -0,0 +1,29 @@
+/*
+ * jquery.scrollSync
+ * Synchronize scroll between multiple containers with varying size
+ * Date: 20151201
+ * 
+ * Thomas Frost
+ * http://xtf.dk/
+ *
+ * Required:
+ * jQuery
+ *  http://jquery.com/
+ * 
+ * Usage:
+ * $('.scrollable').scrollSync();
+ */
+(function ($) {
+    $.fn.scrollSync = function () {
+        var $this = $(this);
+        $this.on('scroll', function (e) {
+            var $sender = $(e.currentTarget);
+            if ($sender.is(":hover")) {
+                var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
+                $this.not($sender).each(function (i, other) {
+                    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
+                });
+            }
+        });
+    };
+})(jQuery);