In Safari on OS X, with a magic trackpad or macbook trackpad, swiping right or left with two fingers effects back and forward, respectively. Is there a way to detect this, as distinct from clicking back/forward, or hitting mand+arrow etc?

The reason is that the swipe has it's own reveal-style swiping animation, and with custom ajax transitions on a site, it looks really weird when you get one following the other. This happens when browsing code on github, for example.

Update 23/6/16: Github reverted to simply swapping out the page content with no transition, which was a smart move. My current practice is to do the same for back/forward, even if some sort of fancy transition in is use on the site. This prevents clashes between whatever the browser might do and the site transition

In Safari on OS X, with a magic trackpad or macbook trackpad, swiping right or left with two fingers effects back and forward, respectively. Is there a way to detect this, as distinct from clicking back/forward, or hitting mand+arrow etc?

The reason is that the swipe has it's own reveal-style swiping animation, and with custom ajax transitions on a site, it looks really weird when you get one following the other. This happens when browsing code on github, for example.

Update 23/6/16: Github reverted to simply swapping out the page content with no transition, which was a smart move. My current practice is to do the same for back/forward, even if some sort of fancy transition in is use on the site. This prevents clashes between whatever the browser might do and the site transition

• javascript
• safari
• webkit

• Not sure I understand what you mean by "the swipe has it's own reveal-style swiping animation". GitHub's little animations on popstate look the same to me in Chrome and Safari. – Kevin Ennis Commented Jun 26, 2012 at 2:18
• Yes, but try swiping (with a modern Apple trackpad) and you'll see what I mean... – Greg Commented Jun 26, 2012 at 4:25
• 1 Oh, God. That's horrible. I had to switch back from three-finger swipe to two-finger swipe to make it happen. – Kevin Ennis Commented Jun 26, 2012 at 4:45
• For whom it may be of interest: Safari seems to throw popstate events at the end of scrolling as well (when it bounces to show that you've reached the end). I'm not sure why as they're not identical to the popstate event you would receive with a history.back() at the same moment; the states in these popstate events seem to always be null. So you can separate these from real history.back() events by setting some data in the state on page load with history.replaceState. If this data is subsequently missing from a popstate event, it's really a end scroll event, not a history back event. – Wilbo Baggins Commented Apr 14, 2019 at 23:45

2 Answers 2

You can use the mousewheel event to see if an horizontal scroll on the trackpad has been performed before your popstate event:

// boolean that stores if a swipe has been performed.
var bScrolled = false;
// countdown in ms before resetting the boolean.
var iTime = 1000;
var oTimeout;
window.addEventListener('mousewheel', function(e) {
  if (e.wheelDeltaY === 0) {
  // there is an horizontal scroll
    if (!bScrolled) {
    // no need to set bScrolled to true if it has been done within the iTime time. 
      bScrolled = true;
      oTimeout = setTimeout(function(){
        bScrolled = false;
      }, iTime);
    }
  }
});

window.onpopstate = function() {
  // clear the timeout to be sure we keep the correct value for bScrolled
  clearTimeout(oTimeout);
  // check if there has been a swipe prior to the change of history state
  if (bScrolled) {
    // check which browser & OS the user is using, then
    // trigger your awesome custom transition.
  }
}

In a word, no. The swipe is written into the UNIX code behind OS X and into the code of the Safari browser. The browser then recognizes the gesture and interprets it to be the back/forward buttons.

That said, you could probably write some code that would recognize a scrolling on the page of a certain velocity which would then trigger your code, but you'd always be in petition with the pre-coded back/forward button recognition of the browser. To my knowledge, you can't modify the browser from within HTML (or any other language, for that matter).