2

Мы разрабатываем горизонтально ориентированный сайт, т.е. страница скролится вправо/лево, ресайз страницы настроен так, что браузерный вертикальный скролл отсутствует.

При тестировании страниц сайта на MacOs столкнулись с проблемой скрола двумя пальцами по тачпаду в браузерах, которые построены на WebKit движке (например Safari). Возможно ли каким-нибудь образом словить события, связанные с двух пальцевым скроллом на тачпаде/трэкпаде в браузерах c движком webkit на mac os и, например, запретить действия этого скролла по умолчанию?

3
  • Если мне не изменяет память, двухпальцевый скролл - это самый что ни на есть обычный скролл. Так что и ловить нужно именно события обычного скролла, если такое возможно в JS.
    – VioLet
    20 авг 2012 в 13:45
  • Скролл колесиком - это mousewheel событие. Действия двухпальцевого скрола и мышки хоть и идентичны, но события ловятся по-разному. 20 авг 2012 в 14:03
  • 1
    Деревенский хак, пропишите max-width и скрол ноне.
    – bes_dimm
    20 авг 2012 в 14:14

1 ответ 1

2

Да это тоже самое что и мышиное колесо. Есть в интернете способы отлавливать именно колесо а не скролл страницы. Если за скроллом следить, то можно вечный цикл юзать. Не помню, как то он в жс по специальному вызывается. Если колесо, то в интернете можно найти только вверх вниз. Реже встречается и вправо влево.

/*

Web App Kit Project (WakaProject). /Waka/Events/onwheel.js - events on wheel up,down,left and right. 
Copyright (C) 2012 TrigenSoftware

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

args:
     delta, deltaX, deltaY - mouse wheel deltas.

recommend:
     to prevent event on parent element you can use event.stopPropagation().    
*/

(function($){

 $.event.special.wheelup = $.event.special.wheeldown = $.event.special.wheelleft = $.event.special.wheelright = {
    setup: function(){
        if(waka.touchable)return false;
        // Gecko, WebKit
        if(this.addEventListener) 
            this.addEventListener('DOMMouseScroll', handler, false);
        // IE, Presto
            this.onmousewheel = handler;
    },    
    teardown: function(){
        if(waka.touchable)return false;
        // Gecko, WebKit
        if(this.removeEventListener) 
            this.removeEventListener('DOMMouseScroll', handler, false);
        // IE, Presto
            this.onmousewheel = null;
    }
 };

 $.fn.extend({
    wheelup: function(f){
        return f ? this.bind('wheelup',f) : this.trigger('wheelup');
    },    
    unwheelup: function(f){
        return this.unbind('wheelup',f);
    },
    wheeldown: function(f){
        return f ? this.bind('wheeldown',f) : this.trigger('wheeldown');
    },    
    unwheeldown: function(f){
        return this.unbind('wheeldown',f);
    },
    wheelleft: function(f){
        return f ? this.bind('wheelleft',f) : this.trigger('wheelleft');
    },    
    unwheelleft: function(f){
        return this.unbind('wheelleft',f);
    },
    wheelright: function(f){
        return f ? this.bind('wheelright',f) : this.trigger('wheelright');
    },    
    unwheelright: function(f){
        return this.unbind('wheelright',f);
    }
 });

 function handler(ev){
    var e = ev, 
        args = [].slice.call( arguments, 1 ), 
        delta = 0, deltaX = 0, deltaY = 0;

    ev = $.event.fix(e);

    // Old school scrollwheel delta
    if(e.wheelDelta)delta = e.wheelDelta/120;
    if(e.detail)delta = -e.detail/3;

    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;

    // Gecko
    if(e.axis !== undefined && e.axis === e.HORIZONTAL_AXIS){
        deltaX = -1*delta;
    }

    // Webkit
    if(e.wheelDeltaY !== undefined )deltaY = e.wheelDeltaY/120; 
    if(e.wheelDeltaX !== undefined )deltaX = -1*e.wheelDeltaX/120;

    if(deltaY > 0)ev.type = 'wheelup';
    if(deltaY < 0)ev.type = 'wheeldown';
    if(deltaX > 0)ev.type = 'wheelright';
    if(deltaX < 0)ev.type = 'wheelleft';

    // Add event and delta to the front of the arguments
    args.unshift(ev, delta, deltaX, deltaY);

    return ($.event.dispatch || $.event.handle).apply(this, args);
 }

})(jQuery);

Вот писал для своей библиотеки ивент для жквери. $(selector).wheelup/down/left/right(func); можно и байндом.

7
  • Спасибо за ссылку. Будем смотреть/пробовать. У нас получается колесико скролит правильно в любом браузере и в любой системе(Windows and MacOs). 20 авг 2012 в 14:37
  • продолжение к предыдущему: А вот именно двухпальцевый тачпад на Маке и имеенно в WibKit браузерах скролит неверно, т.е.: 1) если скролить 2 пальцами вверх-вниз по тачпаду, то идет движение вверх-вниз страницы (хотя браузерный вертикальный скролл отсутствует), а потом только вправо-лево; мы хотели сделать чтоб при этом скроле не было движения вверх-вниз страницы или вообще отключить этот скрол; 2) если скролить двумя пальцами вправо-лево по тачпад, то перелистываются вкладки в браузере, мы же хотели чтобы при этом скроле страница скролилась вправо-лево или также отключить этот вид скрола. 20 авг 2012 в 14:38
  • $(selector).wheelup/down/left/right(function(){ alert('ата-та ата-та, ты колесо крутишь а я скролиться не буду'); return false; }); //отмена скрола, не знаю правда подействует ли это на переключение вкладок браузера. помоему это если тремя пальцами, двумя это все скролл
    – dangreen
    20 авг 2012 в 14:43
  • хотя. раз такое только в сафари, логично предположить что апл чет намутила для своего трекпада. яб проверил, включаются ли тач ивенты на сафари на маке с трекпадом html5rocks.com/en/mobile/touch
    – dangreen
    20 авг 2012 в 14:48
  • Получается, что баг с двухпальцевым скролом для браузеров, построенных на WebKit движке на Маках. Т.к. в Опере и ФаерФоксе на Маке скрол двумя пальцами вверх/вниз и вправо/влево скролит страницы вправо/лево в обоих случаях. 20 авг 2012 в 15:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.