I have a div on my website that allows for horizontal scrolling, while the entire page can be scrolled vertically. When the cursor is over a specific section, it disables vertical scrolling and enables horizontal scrolling within that section. I have implemented a function to achieve this functionality. How can I modify the function so that when the horizontal scroll within the section reaches its limit, the section scrolling ceases and the webpage scrolling resumes? What steps should I take to accomplish this task? Below is the function I am currently using for horizontal scrolling within the section:
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('myDIV').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('myDIV').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('myDIV').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('myDIV').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('myDIV').attachEvent("onmousewheel", scrollHorizontally);
}
})();