Чтобы разрешить элементу (например, <div>) прокручиваться с помощью трекпада, но запретить браузеру вернуться на предыдущую страницу, необходимо запретить действие браузера по умолчанию.
Вы можете сделать это, прослушивая событие mousewheel на элементе. Используя свойства прокрутки элемента и свойства deltaX / Y для события, вы можете предотвратить и остановить действие по умолчанию, когда оно опускается ниже нуля или превышает ширину / высоту.
Вы также можете использовать дельта-информацию для ручной прокрутки, когда вы запрещаете всю операцию прокрутки. Это позволяет вам фактически достичь нуля, а не останавливаться на 10 пикселях или что-то в этом роде.
// Add the event listener which gets triggered when using the trackpad
element.addEventListener('mousewheel', function(event) {
// We don't want to scroll below zero or above the width and height
var maxX = this.scrollWidth - this.offsetWidth;
var maxY = this.scrollHeight - this.offsetHeight;
// If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually
if (this.scrollLeft + event.deltaX < 0 ||
this.scrollLeft + event.deltaX > maxX ||
this.scrollTop + event.deltaY < 0 ||
this.scrollTop + event.deltaY > maxY) {
event.preventDefault();
// Manually set the scroll to the boundary
this.scrollLeft = Math.max(0, Math.min(maxX, this.scrollLeft + event.deltaX));
this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
}
}, false);
Это работает на Chrome, Safari и Firefox на Mac. Я не тестировал на IE.
Это решение повлияет только на рассматриваемый элемент и позволит остальной части страницы вести себя как обычно. Таким образом, вы можете использовать свой браузер, как ожидалось, и вернуться на страницу, но, находясь внутри элемента, вы случайно не вернетесь назад, когда не хотели.