Merge pull request #1186 from harvesthq/fix-scrolling-issue-take2

Refactored scrolling functionality to fail gracefully
harvesthq · May 2, 2013 · 8faa45f · 8faa45f
2 parents 9969a46 + 7fb96a4
commit 8faa45f
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 61 deletions.
diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js
@@ -449,12 +449,9 @@ Copyright (c) 2011 by Harvest
       this.search_results.mouseout(function(evt) {
         _this.search_results_mouseout(evt);
       });
-      this.search_results.bind('mousewheel', function(evt) {
+      this.search_results.bind('mousewheel DOMMouseScroll', function(evt) {
         _this.search_results_mousewheel(evt);
       });
-      this.search_results.bind('DOMMouseScroll', function(evt) {
-        _this.search_results_mousewheel_ff(evt);
-      });
       this.form_field_jq.bind("liszt:updated", function(evt) {
         _this.results_update_field(evt);
       });
@@ -533,19 +530,15 @@ Copyright (c) 2011 by Harvest
     };
 
     Chosen.prototype.search_results_mousewheel = function(evt) {
-      this.search_results[0].scrollTop -= evt.wheelDelta;
-      return evt.preventDefault();
-    };
+      var delta, _ref1, _ref2;
 
-    Chosen.prototype.search_results_mousewheel_ff = function(evt) {
-      var bottom_overflow, delta, target, top_overflow, _ref1;
-
-      target = evt.currentTarget;
-      delta = ((_ref1 = evt.originalEvent) != null ? _ref1.wheelDelta : void 0) || -evt.detail;
-      bottom_overflow = target.scrollTop + $(target).outerHeight() - target.scrollHeight >= 0;
-      top_overflow = target.scrollTop <= 0;
-      if (target.scrollHeight > $(target).outerHeight() && ((delta < 0 && bottom_overflow) || (delta > 0 && top_overflow))) {
-        return evt.preventDefault();
+      delta = -((_ref1 = evt.originalEvent) != null ? _ref1.wheelDelta : void 0) || ((_ref2 = evt.originialEvent) != null ? _ref2.detail : void 0);
+      if (delta != null) {
+        evt.preventDefault();
+        if (evt.type === 'DOMMouseScroll') {
+          delta = delta * 40;
+        }
+        return this.search_results.scrollTop(delta + this.search_results.scrollTop());
       }
     };
 

diff --git a/chosen/chosen.jquery.min.js b/chosen/chosen.jquery.min.js
diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js
@@ -443,7 +443,7 @@ Copyright (c) 2011 by Harvest
         return _this.search_results_mousewheel(evt);
       });
       this.search_results.observe("DOMMouseScroll", function(evt) {
-        return _this.search_results_mousewheel_ff(evt);
+        return _this.search_results_mousewheel(evt);
       });
       this.form_field.observe("liszt:updated", function(evt) {
         return _this.results_update_field(evt);
@@ -522,19 +522,15 @@ Copyright (c) 2011 by Harvest
     };
 
     Chosen.prototype.search_results_mousewheel = function(evt) {
-      this.search_results.scrollTop -= evt.wheelDelta;
-      return evt.preventDefault();
-    };
+      var delta;
 
-    Chosen.prototype.search_results_mousewheel_ff = function(evt) {
-      var bottom_overflow, delta, target, top_overflow;
-
-      target = evt.currentTarget;
-      delta = evt.wheelDelta || (evt.originalEvent && evt.originalEvent.wheelDelta) || -evt.detail;
-      bottom_overflow = target.scrollTop + target.getHeight() - target.scrollHeight >= 0;
-      top_overflow = target.scrollTop <= 0;
-      if (target.scrollHeight > target.getHeight() && ((delta < 0 && bottom_overflow) || (delta > 0 && top_overflow))) {
-        return evt.preventDefault();
+      delta = -evt.wheelDelta || evt.detail;
+      if (delta != null) {
+        evt.preventDefault();
+        if (evt.type === 'DOMMouseScroll') {
+          delta = delta * 40;
+        }
+        return this.search_results.scrollTop = delta + this.search_results.scrollTop;
       }
     };
 

diff --git a/chosen/chosen.proto.min.js b/chosen/chosen.proto.min.js
diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
@@ -78,8 +78,7 @@ class Chosen extends AbstractChosen
     @search_results.mouseup (evt) => this.search_results_mouseup(evt); return
     @search_results.mouseover (evt) => this.search_results_mouseover(evt); return
     @search_results.mouseout (evt) => this.search_results_mouseout(evt); return
-    @search_results.bind 'mousewheel', (evt) => this.search_results_mousewheel(evt); return
-    @search_results.bind 'DOMMouseScroll', (evt) => this.search_results_mousewheel_ff(evt); return # for Firefox
+    @search_results.bind 'mousewheel DOMMouseScroll', (evt) => this.search_results_mousewheel(evt); return
 
     @form_field_jq.bind "liszt:updated", (evt) => this.results_update_field(evt); return
     @form_field_jq.bind "liszt:activate", (evt) => this.activate_field(evt); return
@@ -126,20 +125,12 @@ class Chosen extends AbstractChosen
   container_mouseup: (evt) ->
     this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
 
-  # scrolling event handler for all but Firefox
   search_results_mousewheel: (evt) ->
-    @search_results[0].scrollTop -= evt.wheelDelta
-    evt.preventDefault()
-
-  # scrolling event handler for Firefox
-  search_results_mousewheel_ff: (evt) ->
-    target = evt.currentTarget
-    delta = evt.originalEvent?.wheelDelta or -evt.detail
-    bottom_overflow = target.scrollTop + $(target).outerHeight() - target.scrollHeight >= 0
-    top_overflow = target.scrollTop <= 0
-
-    if target.scrollHeight > $(target).outerHeight() and ((delta < 0 and bottom_overflow) or (delta > 0 and top_overflow))
-        evt.preventDefault()
+    delta = -evt.originalEvent?.wheelDelta or evt.originialEvent?.detail
+    if delta?
+      evt.preventDefault()
+      delta = delta * 40 if evt.type is 'DOMMouseScroll'
+      @search_results.scrollTop(delta + @search_results.scrollTop())
 
   blur_test: (evt) ->
     this.close_field() if not @active_field and @container.hasClass "chzn-container-active"

diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee
@@ -70,7 +70,7 @@ class Chosen extends AbstractChosen
     @search_results.observe "mouseover", (evt) => this.search_results_mouseover(evt)
     @search_results.observe "mouseout", (evt) => this.search_results_mouseout(evt)
     @search_results.observe "mousewheel", (evt) => this.search_results_mousewheel(evt)
-    @search_results.observe "DOMMouseScroll", (evt) => this.search_results_mousewheel_ff(evt) # for Firefox
+    @search_results.observe "DOMMouseScroll", (evt) => this.search_results_mousewheel(evt)
 
     @form_field.observe "liszt:updated", (evt) => this.results_update_field(evt)
     @form_field.observe "liszt:activate", (evt) => this.activate_field(evt)
@@ -116,21 +116,12 @@ class Chosen extends AbstractChosen
   container_mouseup: (evt) ->
     this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
 
-  # scrolling event handler for all but Firefox
   search_results_mousewheel: (evt) ->
-    @search_results.scrollTop -= evt.wheelDelta
-    evt.preventDefault()
-
-  # scrolling event handler for Firefox
-  search_results_mousewheel_ff: (evt) ->
-    target = evt.currentTarget
-    delta = evt.wheelDelta or (evt.originalEvent and evt.originalEvent.wheelDelta) or -evt.detail
-    bottom_overflow = target.scrollTop + target.getHeight() - target.scrollHeight >= 0
-    top_overflow = target.scrollTop <= 0
-
-    if target.scrollHeight > target.getHeight() and ((delta < 0 and bottom_overflow) or (delta > 0 and top_overflow))
-        evt.preventDefault()
-
+    delta = -evt.wheelDelta or evt.detail
+    if delta?
+      evt.preventDefault()
+      delta = delta * 40 if evt.type is 'DOMMouseScroll'
+      @search_results.scrollTop = delta + @search_results.scrollTop
 
   blur_test: (evt) ->
     this.close_field() if not @active_field and @container.hasClassName("chzn-container-active")