Give scroller element a V scrollbar again

Hide it by overlaying it with our fake scrollbar. Remove explicit wheel handling for reasons of being extremely hard to get right. Issue #694
codemirror · Aug 6, 2012 · dae1574 · dae1574
1 parent 1c8ac0d
commit dae1574
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 55 deletions.
diff --git a/lib/codemirror.css b/lib/codemirror.css
@@ -9,8 +9,7 @@
 }
 
 .CodeMirror-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto;
   height: 300px;
   /* This is needed to prevent an IE[67] bug where the scrolled content
      is visible outside of the scrolling box. */
@@ -20,13 +19,11 @@
 
 /* Vertical scrollbar */
 .CodeMirror-scrollbar {
-  float: right;
+  position: absolute;
+  right: 0; top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
-
-  /* This corrects for the 1px gap introduced to the left of the scrollbar
-     by the rule for .CodeMirror-scrollbar-inner. */
-  margin-left: -1px;
+  z-index: 5;
 }
 .CodeMirror-scrollbar-inner {
   /* This needs to have a nonzero width in order for the scrollbar to appear

diff --git a/lib/codemirror.js b/lib/codemirror.js
@@ -124,8 +124,6 @@ var CodeMirror = (function() {
     connect(scroller, "scroll", onScrollMain);
     connect(scrollbar, "scroll", onScrollBar);
     connect(scrollbar, "mousedown", function() {if (focused) setTimeout(focusInput, 0);});
-    connect(scroller, "mousewheel", onMouseWheel);
-    connect(scroller, "DOMMouseScroll", onMouseWheel);
     connect(window, "resize", function() {updateDisplay(true);});
     connect(input, "keyup", operation(onKeyUp));
     connect(input, "input", fastPoll);
@@ -391,8 +389,10 @@ var CodeMirror = (function() {
     }
 
     function onScrollBar(e) {
-      if (scrollbar.scrollTop != scroller.scrollTop)
-        scroller.scrollTop = scrollbar.scrollTop;
+      if (scrollbar.scrollTop != lastScrollTop) {
+        lastScrollTop = scroller.scrollTop = scrollbar.scrollTop;
+        updateDisplay([]);
+      }
     }
 
     function onScrollMain(e) {
@@ -710,21 +710,6 @@ var CodeMirror = (function() {
       setTimeout(function() {if (!focused) shiftSelecting = null;}, 150);
     }
 
-    function onMouseWheel(e) {
-      var dx = e_wheelDeltaX(e), dy = e_wheelDeltaY(e);
-      if (dx) {
-        var ndx = Math.round(normalizeWheelDelta(dx) * 20);
-        if (!ndx) ndx = dx > 0 ? 1 : -1;
-        scroller.scrollLeft += ndx;
-      }
-      if (dy) {
-        var ndy = Math.round(normalizeWheelDelta(dy) * 20);
-        if (!ndy) ndy = dy > 0 ? 1 : -1;
-        scrollbar.scrollTop += ndy;
-      }
-      if (dx || dy) e_stop(e);
-    }
-
     // Replace the range from from to to by the strings in newText.
     // Afterwards, set the selection to selFrom, selTo.
     function updateLines(from, to, newText, selFrom, selTo) {
@@ -3051,34 +3036,6 @@ var CodeMirror = (function() {
     return overridden ? e.override[prop] : e[prop];
   }
 
-  var normalizeWheelDelta = function() {
-    var distribution = [];
-    return function(n) {
-      var abs = Math.abs(n);
-      outer: do { // Just used for break goto
-        for (var i = 0; i < distribution.length; ++i) {
-          if (abs <= distribution[i]) {
-            distribution.splice(i, 0, abs);
-            break outer;
-          }
-        }
-        distribution.push(abs);
-      } while (false);
-      var factor = 1 / distribution[Math.floor(distribution.length / 3)];
-      if (distribution.length == 500)
-        normalizeWheelDelta = function(n) {return n * factor;};
-      return n * factor;
-    };
-  }();
-  function e_wheelDeltaX(e) {
-    if (e.detail && e.axis == e.HORIZONTAL_AXIS) return e.detail;
-    return -(e.wheelDeltaX || 0);
-  }
-  function e_wheelDeltaY(e) {
-    if (e.detail && e.axis == e.VERTICAL_AXIS) return e.detail;
-    return -(e.wheelDeltaY || e.wheelDelta || 0);
-  }
-
   // Event handler registration. If disconnect is true, it'll return a
   // function that unregisters the handler.
   function connect(node, type, handler, disconnect) {
@@ -3183,7 +3140,7 @@ var CodeMirror = (function() {
   function createElement(tag, text, className, style) {
     var e = document.createElement(tag);
     if (className) e.className = className;
-    if (style) e.setAttribute("style", style);
+    if (style) e.style.cssText = style;
     if (text) setTextContent(e, text);
     return e;
   }