¿Cómo detectar mouseup en una barra de desplazamiento? (o evento "scrollEnd")

Question

¿Alguien tiene alguna idea de cómo detectar un evento mouseup en una barra de desplazamiento? Funciona en FF, pero no en Chrome o IE9.

puedo tener un breve demostración: http://jsfiddle.net/2EE3P/

La idea general es que quiero para detectar un evento scrollEnd. Obviamente no existe tal cosa, así que estaba yendo con una combinación de mouseUp y temporizadores, pero mouseUp no se activa en la mayoría de los navegadores. El div contiene una grilla de elementos, por lo tanto, cuando el usuario deja de desplazarse, quiero ajustar la posición de desplazamiento al punto más cercano que tenga sentido, p. el borde de la celda más cercana. Sin embargo, no quiero ajustar automáticamente la posición si están en el medio del desplazamiento.

También voy a aceptar alegremente cualquier respuesta que me da el equivalente de scrollEnd

Answer 1

responder a mi propia pregunta, así que se puede cerrar - no hay una buena solución a este, por lo que es temporizadores ...

Answer 2

usando jQuery hay un evento .scroll que puede utilizar. Tal vez use una variable global para realizar un seguimiento de cuándo ha dejado de cambiar .scrollTop() (devuelve el número de píxeles que hay sobre la pantalla). Aún crea una condición de carrera, pero debería funcionar.

Answer 3

encontrado una solución que funciona sin contadores de tiempo, pero sólo si se está desplazando la ventana completa .

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; 
} 

bastante sucio .. pero funciona.

Answer 4

Estaba manejando el mismo problema. Para mí, IE9 no emite evento mouseup para barras de desplazamiento. Entonces, revisé y en IE9 cuando "mouseup" emite un evento mousemove. Entonces lo que hice fue monitorear el desplazamiento y monitorear mousemove. Cuando el usuario se desplaza, y ocurre un evento mousemove, entonces lo entiendo como un evento mouseup. Solo haga este control para IE9, revisando la disponibilidad de la propiedad proto. El código también se ejecutará para Opera, pero Opera tiene el mouseup y luego no hay problema para mí cuando ocurren ambos eventos. Aquí está el código, escribo AngularJS + código ZEPTO, por lo que da la idea y escribir su propio código, no espere a copiar & pega este código directamente:

 // 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(); 
     }); 

estaba luchando con este problema. Mi sistema también funciona para dispositivos móviles y tengo un gran desplazamiento horizontal, que siempre que el usuario deja de desplazarse, necesita encontrar el elemento real que está viendo y centralizar este elemento en la pantalla (posición de actualización). Espero que esto le pueda ayudar. Esto es para soportar IE9 +, FF, Chorme y Opera, no me preocupo con los navegadores antiguos.

Saludos

Answer 5

es muy tarde, pero .... hay solución con cualquier desplazamiento en cualquier parte de la página .... lo hago con el siguiente código ...

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>