Любой способ предотвратить прокрутку горизонтальной прокрутки, прокручивая назад жест в OS X Lion Safari?

Ответ 1

Я искал решение в течение нескольких дней. Что я до сих пор в этом плагине:

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

Он отключил прокрутку для OSX Chrome (я не смог найти способ отключить его для OSX Safari), когда вы прокручиваете влево и вверх.

Я надеюсь, что это поможет, пожалуйста, внесите свой вклад в проект с любыми найденными ошибками или если вы найдете способ отключить это раздражающее поведение для Safari

Ответ 2

Чтобы позволить элементу (например, a <div>) прокручиваться с помощью трекпада, но не позволять браузеру вернуться на предыдущую страницу, вам необходимо предотвратить действие браузера по умолчанию.

Вы можете сделать это, прослушивая событие mousewheel на элементе. Используя свойства прокрутки элемента и свойства deltaX/Y в событии, вы можете предотвратить и остановить действие по умолчанию, когда оно опускается ниже нуля или выше ширины/высоты.

Вы также можете использовать дельта-информацию для ручного прокрутки, когда вы предотвращаете всю операцию прокрутки. Это позволяет вам фактически перейти на нуль, а не останавливаться на 10 пикселей или что-то в этом роде.

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

Это работает на Chrome, Safari и Firefox на Mac. Я не тестировал IE.

Это решение затронет только этот элемент и позволит остальной странице вести себя как обычно. Таким образом, вы можете использовать свой браузер так, как ожидалось, и возвращать страницу, но, находясь внутри элемента, вы случайно не вернетесь, когда не хотите.

Ответ 3

Да, чтобы отключить поведение по умолчанию (проведите пальцем, щепотку и т.д.), все, что вам нужно сделать, это добавить:

event.preventDefault();

В этом случае просто зарегистрируйте прослушиватель touchMove и используйте preventDefault() там (в функции "touchmove" ).

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

Ответ 4

Посмотрите стиль CSS3

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

Это отлично работает для меня, когда используемое приложение ожидается только в браузерах, поддерживающих HTML5/CSS3.

Ответ 5

Я также использовал jQuery mousewheel, прикрепляя этот обратный вызов:

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
}

Ответ 6

Piggy отступает от https://github.com/micho/jQuery.preventMacBackScroll, отправленный micho. Я сделал это возможным как в сафари, так и в хроме. Кроме того, я сделал это как для левой прокрутки, так и для прокрутки справа.

(Извините, что это в coffeescript. Нетрудно перевести обратно в javascript)

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

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

# Detect browsers
# http://stackoverflow.com/info/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()