I am working on a function that enables horizontal scrolling with the mousewheel for a selected div.
My goal is to apply this function to the element when clicked, and then remove it when clicking outside of it. I have been successful in adding the functionality, but I am struggling to figure out how to properly remove the function when clicked outside of the div (even if the mouse is still within the div).
Here is the jQuery code I have so far:
$mainDiv.on('click', function() {
$(this).find($scrollableContainer).horizontal();
});
This is the function responsible for enabling horizontal scroll (using a mousewheel plugin):
$.fn.horizontal = function() {
$(this).mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
};
In essence, what I want to achieve is this: when a user clicks on $mainDiv, add the horizontal() function to $scrollableContainer. Then, if the user clicks outside of $mainDiv, remove the horizontal() function from $scrollableContainer. I attempted using a click event on the body, but it did not work as expected:
$('body').on('click', function() {
$(this).find($scrollableContainer).off();
});
Any assistance would be greatly appreciated!