We are developing a horizontally oriented site, i.e. the page scrolls right / left, the page resize is configured so that there is no browser vertical scroll.

When testing website pages on MacOs, we encountered the problem of scrolling with two fingers on the touchpad in browsers that are built on the WebKit engine (for example, Safari). Is it possible to somehow catch the events associated with two-finger scrolling on the touchpad / trackpad in browsers with the webkit engine on mac os and, for example, to prohibit the actions of this scroll by default?

  • If my memory serves me, a two-finger scroll is the usual scroll. So you need to catch the usual scrolling events, if this is possible in JS. - VioLet
  • The scroll wheel is a mousewheel event. The actions of the double-finger scroll and the mouse, although identical, are trapped in different ways. - Tanyusha Starolatko
  • one
    Rustic hack, write max-width and scroll none. - bes_dimm

1 answer 1

Yes, this is the same as the mouse wheel. There are ways on the Internet to catch exactly the wheel and not the page scroll. If you follow the scroll, then you can use the eternal cycle. I do not remember how he is called in a special way. If the wheel, then the Internet can only be found upside down. Less common and right to the left.

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

Here I wrote an event for my library for my library. $(selector).wheelup/down/left/right(func); can and bind.

  • Thanks for the link. We will look / try. We get the scroll wheel correctly in any browser and in any system (Windows and MacOs). - Tanyusha Starolatko
  • continuation to the previous one: But it is the two-finger touchpad on Mac and in WibKit browsers that scrolls incorrectly, that is: 1) if you scroll 2 fingers up and down on the touchpad, then the page goes up and down (although there is no browser vertical scroll) , and then just left-right; we wanted to make sure that at this scrolling there was no movement up and down the page or even disable this scrolling altogether; 2) if you scroll with two fingers right-left on the touchpad, then browse the tabs in the browser, we wanted the page scrolled right-left while scrolling or disable this type of scrolling. - Tanyusha Starolatko
  • $ (selector) .wheelup / down / left / right (function () {alert ('ata-ta attack, you turn the wheel and I won't scroll ”); return false;}); // cancel the scrolling, I don’t know if it will really affect the switching of browser tabs. to mine it is if with three fingers, two is all a scroll - dangreen
  • although. Since this is only in safari, it is logical to assume that the applet has namutil for its trackpad. Yab checked if the touch events are included on a safari on a poppy with a trackpad html5rocks.com/en/mobile/touch - dangreen
  • It turns out that the two-finger skroll bug for browsers built on the WebKit engine on Macs. Because in Opera and Firefox on Mac, with two fingers, scrolling up / down and right / left will scroll pages right / left in both cases. - Tanyusha Starolatko