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

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

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

12
browser firefox javascript jquery webkit

4 ответов

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

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

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

Примечание: onpopstate (или событие onbeforeunload) не работает на iOS.

19

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

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

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

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

System Preferences -> Trackpad -> More Gestures.

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

4

работает в Chrome и Safari (i.e протестировано с 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);
2