javascript - ¿Alguna forma de evitar el desplazamiento horizontal activando el gesto de retroceso en OS X Lion Safari?

macos

Question

Estoy trabajando en una interfaz de usuario que utiliza el desplazamiento horizontal en un elemento div (mediante overflow: scroll ). No puedo desplazarme hacia la izquierda, ya que iniciaría la animación para volver al historial. Del mismo modo, no puedo desplazarme hacia la derecha cuando hay un sitio web al que avanzar.

Funciona bien en otros navegadores, incluido Chrome en OS X Lion, que también admite el deslizado para volver a la historia. (En un momento, mientras estaba desarrollando, también me desplacé en un div Trabajé en Safari. Agregué controladores de eventos y html que probablemente rompieron el desplazamiento, pero no tengo ni idea de por qué cambió).

Idealmente, me gustaría evitar retroceder o avanzar en la historia cuando se desplaza en un div específico (incluso cuando ha llegado a su fin).

Actualización: Intenté agregar jQuery.mousewheel y de alguna manera solucioné el problema. (Acabo de adjuntar un controlador de eventos vacío en .mousewheel() .) Todavía estoy buscando una respuesta definitiva.

Answer 1

El piggy se está retirando de https://github.com/micho/jQuery.preventMacBackScroll publicado por micho. He hecho esto posible tanto en safari como en chrome. Además, lo hice funcionar tanto para el desplazamiento a la izquierda como para el desplazamiento a la derecha.

(Lamento que esto esté en coffeescript. No sería difícil volver a traducir a javascript)

$(document).on ''ready'', ->

# This code is only valid for Mac
if !navigator.userAgent.match(/Macintosh/)
    return

# Detect browsers
# http://stackoverflow.com/questions/5899783/detect-safari-using-jquery
is_chrome = navigator.userAgent.indexOf(''Chrome'') > -1
is_safari = navigator.userAgent.indexOf("Safari") > -1
is_firefox = navigator.userAgent.indexOf(''Firefox'') > -1

# Handle scroll events in Chrome, Safari, and Firefox
if is_chrome || is_safari || is_firefox

    $(window).on ''mousewheel'', (event) ->
        dX = event.deltaX || event.originalEvent.deltaX
        dY = event.deltaY || event.originalEvent.deltaY

        # If none of the parents can be scrolled right when we try to scroll right
        prevent_right = dX > 0 && $(event.target)
            .parents().addBack()
                .filter ->
                    return this.scrollWidth - this.clientWidth != 0 &&
                     $(this).scrollLeft() < this.scrollWidth - this.clientWidth &&
                     ($(this).css(''overflow-y'') == ''scroll'' || $(this).css(''overflow-y'') == ''auto'')
                .length == 0

        # If none of the parents can be scrolled left when we try to scroll left
        prevent_left = dX < 0 && $(event.target)
            .parents().addBack()
                .filter ->
                    return $(this).scrollLeft() > 0
                .length == 0

        # If none of the parents can be scrolled up when we try to scroll up
        prevent_up = dY > 0 && !$(event.target)
            .parents().addBack()
                .filter ->
                    return $(this).scrollTop() > 0
                .length == 0

        # Prevent minute left and right scroll from messing up vertical scroll
        if (prevent_right || prevent_left) && Math.abs(dY) > 5 && !prevent_up
            return
        # Prevent futile scroll, which would trigger the Back/Next page event
        if prevent_left || prevent_up || prevent_right
            event.preventDefault()

Answer 2

He estado buscando una solución por días. Lo que tengo hasta ahora está en este plugin:

https://github.com/micho/jQuery.preventMacBackScroll

Deshabilitó el desplazamiento para OSX Chrome (no pude encontrar una manera de deshabilitarlo para OSX Safari) cuando se desplaza hacia la izquierda y hacia arriba.

Espero que esto ayude, por favor contribuya al proyecto con cualquier error que encuentre, o si encuentra una manera de deshabilitar este comportamiento molesto para Safari

Answer 3

Mira en el estilo CSS3

-ms-touch-action: none;
touch-action: none;

Esto funciona perfectamente para mí cuando la aplicación utilizada solo se espera en navegadores compatibles con HTML5 / CSS3.

Answer 4

Para permitir que un elemento (por ejemplo, un <div> ) se desplace con un trackpad pero impida que el navegador vuelva a la página anterior, debe evitar la acción predeterminada del navegador.

Puede hacer esto escuchando el evento de la rueda del ratón en el elemento. Al usar las propiedades de desplazamiento del elemento y las propiedades deltaX / Y en el evento, puede evitar y detener la acción predeterminada cuando se encuentra por debajo de cero o por encima del ancho / alto.

También puede usar la información delta para desplazarse manualmente cuando está impidiendo toda la operación de desplazamiento. Esto le permite llegar a cero en lugar de detenerse en 10 píxeles o algo así.

// Add the event listener which gets triggered when using the trackpad 
element.addEventListener(''mousewheel'', function(event) {
  // We don''t want to scroll below zero or above the width and height 
  var maxX = this.scrollWidth - this.offsetWidth;
  var maxY = this.scrollHeight - this.offsetHeight;

  // If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually 
  if (this.scrollLeft + event.deltaX < 0 || 
     this.scrollLeft + event.deltaX > maxX || 
     this.scrollTop + event.deltaY < 0 || 
     this.scrollTop + event.deltaY > maxY) {

    event.preventDefault();

    // Manually set the scroll to the boundary
    this.scrollLeft = Math.max(0, Math.min(maxX, this.scrollLeft + event.deltaX));
    this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
  }
}, false);

Esto funciona en Chrome, Safari y Firefox en Mac. No he probado en IE.

Esta solución solo afectará el elemento en cuestión y permitirá que el resto de la página se comporte de manera normal. Por lo tanto, puede usar su navegador como se espera y retroceder una página, pero mientras esté dentro del elemento, no volverá accidentalmente cuando no tenía la intención de hacerlo.

Answer 5

Sí, para deshabilitar el comportamiento predeterminado (deslizar, pellizcar, etc.), todo lo que tiene que hacer es agregar:

event.preventDefault();

En su caso, simplemente registre el oyente touchMove y use preventDefault () allí (en la función "touchmove").

element.addEventListener("touchmove", touchMove, false);

Answer 6

También usé jQuery mousewheel, adjuntando esta devolución de llamada:

onMousewheel: function(e, delta, deltaX, deltaY){
  e.preventDefault();
  $(''leftElement'').scrollLeft($(''leftElement'').scrollLeft() + deltaX); // leftElement =     container element I want to scroll left without going back/forward
  $(''downElement'').scrollTop($(''downElement'').scrollTop() - deltaY); // this was another element within the container element
}