I am looking for a solution to prevent the page from scrolling back to the previous section while scrolling within a specific div element. Currently, I am using Alvarotrigo's fullpage scroll plugin, although I am not sure if that is relevant to the issue at hand. Essentially, there are two "pages" on this webpage. The ".table-responsive" element is on the second page and I have set it to have overflow:scroll. However, when scrolling up within that div, it also scrolls up to the first page.
I have attempted the following code snippet, but it did not resolve the issue:
$('.table-responsive').on( 'mousewheel DOMMouseScroll', function (e) {
var e0 = e.originalEvent;
var delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
Here is the HTML code snippet:
<div class="table-responsive">
<div class="table">
<thead>TABLE</thead>
<tbody>...</tbody>
</div>
</div>
And here is the CSS code snippet:
.table-responsive {
width: 70%;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
height: 40vh;
overflow: scroll;
border: 3px solid #fff;
background-color: rgba(0,0,0,0.6);
}