Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage.
The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" feature in Chrome once they reach the edges of the table.
Is there a way to prevent this two-finger go forward/back trackpad behavior while hovering over a specific div?
CSS:
.scrollable {
height: 100%;
overflow-y: scrol
width: 100%;
overflow-x: scrol
}
HTML:
<div class="scrollable" id="tableHere">
<table>
-- inserting an extremely wide table here --
</table>
</div>