Как предотвратить переключение браузера в историю при прокрутке по горизонтали?

Как отключить стандартные функции браузера по умолчанию, используя JQuery или Native JS для перехода назад или вперед при прокрутке по горизонтали?

Это обычно происходит при использовании трекпада и при прокрутке до конца или запуска прокручиваемого div.

Ответ 1

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

Вот решение, если кто-то еще сталкивается с этой проблемой, как я:

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here';
};

Ответ 2

history.pushState(null, null, location.href);
window.onpopstate = function(event) {
    history.go(1);
};

Демо: http://jsfiddle.net/DerekL/RgDBQ/show/

Вы не сможете вернуться на предыдущую веб-страницу, если вы не спамете кнопку "Назад" или не удерживаете кнопку "Назад" и не выбираете предыдущую запись.

_{Примечание: onpopstate (или событие onbeforeunload), похоже, не работает на iOS.}

Ответ 3

Если вы находитесь на mac, это вызвано Жестками дорожки дорожки.

System Preferences -> Trackpad -> More Gestures.

Не решение JS, которое вы ищете, но если вы просто хотите его предотвратить, вы можете отключить эту функцию.

Ответ 4

Работает в Chrome и Safari (например, с Chrome и Safari):

// el === element on which horizontal scrolling is done 
// (can be container of scrolled element or body or any other ancestor)
var preventHistoryBack = function (e) {
  var delta = e.deltaX || e.wheelDeltaX;

  if (! delta) {
    return;
  }

  window.WebKitMediaKeyError /*detect safari*/ && (delta *= -1);

  if (((el.scrollLeft + el.offsetWidth) === el.scrollWidth && delta > 0) || (el.scrollLeft === 0 && delta < 0) ) {
    e.preventDefault();
  }
};
el.addEventListener('mousewheel', preventHistoryBack);