How to identify a mouse on a scroll bar? (or event "scrollEnd")

Question

Does anyone know how to detect a mouseup event on a scrollbar? It works in FF, but not in Chrome or IE9.

I installed a quick demo: http://jsfiddle.net/2EE3P/

The general idea is that I want to detect the scrollEnd event. Obviously there is no such thing, so I was going to use a combination of mouseUp and timers, but mouseUp doesn’t shoot in most browsers! The div contains a grid of elements, so when the user stops scrolling, I want to adjust the scroll position to the nearest point, which makes sense, for example. edge of the nearest cell. However, I do not want to automatically adjust the position if they are in the middle of the scroll.

I would also happily agree with any answer that gives me the scrollEnd equivalent

Answer 1

Answering my own question, so I can close it - there is no good solution, so the timers are ...

Answer 2

found a solution that works without timers, but only if you scroll through the full window.

 switch(event.type){ case 'mousedown': _btnDown = true; //THIS IS ONLY CAUSE MOUSEUP ON SCROLLBAR IS BUGGY $(document).bind('mousemove',function(event){ if(event.pageX < ($(window).width() - 30)){ //mouse is off scrollbar $(this).unbind(event); $(this).trigger('mouseup'); } }); break: case 'mouseup': //do whatever _btnDown = false; break; } 

pretty dirty .. but it works.

Answer 3

Using jquery, you can use the .scroll event. Perhaps use a global variable to track when .scrollTop () (it returns the number of pixels above the screen) stopped changing? Still creating a race condition, but it should work.

Answer 4

I dealt with the same problem. For me, IE9 does not throw out a mouseup event for scrollbars. So, I checked on IE9 when you "mouseup" throws a mousemove event. So what I did is scroll the monitor and control mousemove. When the user scrolls and the mousemove event occurs, I understand it as a mouseup event. Just do this check for IE9 by running proto accessibility. The code will also work for Opera, but Opera has a mouse, and then there is no problem for me when both events happen. Here is the code, I am writing AngularJS + ZEPTO code, so get the idea and write your own code, do not wait to copy and paste this code directly:

  // Global for scrolling timeout var q; // Action to do when stop scrolling var updatePosition = function() { // Put the code for stop scrolling action here } $(document).on('mousemove', function(e) { console.log('MOUSE MOVE ' + e.pageX + ',' + e.pageY); if(!('__proto__' in {})) { // for IE only, because it dont have mouseup if($scope.scrolling && $scope.mouse_down) { console.log('FAKE MOUSE UP FOR IE'); // Only simulate the mouseup if mouse is down and scrolling $scope.scrolling = false; $scope.mouse_down = false; // Update Position is the action i do when mouseup, stop scrolling updatePostition(); } } }); $(window).on('scroll', function(){ console.log('SCROLLING'); // Set the scrolling flag to true if(!$scope.scrolling) { $scope.scrolling = true; } // Stop if for some reason you disabled the scrolling monitor if(!$scope.monitor_scrolling) return; // Monitor scroll with a timeout // Update Position is the action i do when stop scrolling var speed = 200; $timeout.cancel(q); q = $timeout(updatePostition, speed); }); $(window).on('mousedown', function() { console.log('MOUSE DOWN'); // Stop monitor scrolling $scope.monitor_scroll = false; // Set that user is mouse down $scope.mouse_down = true; }); $(window).on('mouseup', function() { console.log('MOUSE UP'); // Enable scrolling monitor $scope.monitor_scroll = true; // Change mouse state $scope.mouse_down = false; // Action when stop scrolling updatePostition(); }); 

Struggling with this problem. My system also works for mobile devices, and I have a large horizontal scroll, which whenever the user stops scrolling, I need to find the actual element that is being used - this is viewing and centralizing this element on the screen (updatePosition). Hope this can help you. This is support for IE9 +, FF, Chorme and Opera, I'm not worried about older browsers.

Best wishes

Answer 5

It's very late, but ... there is a solution with any scrolling anywhere in your page .... I am doing this with the following code ...

 onScroll = function(){ $(window).unbind("mouseup").one('mouseup',function(e) { alert("scroll up") }); }; $(window).bind("scroll", onScroll); 

 body{ height:5000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>