HTML - multi-selector dom scrolling on long forms
I am working on a form system that a form can have many fields with any type of input. Meaning I have a text input / area, radio, checkbox, multiple select and select.
My problem is that when the form scrolls, if the mouse enters the multi-selection (I assume the individual selections will do that too) the selection takes control of the mouse events, so the scrolling stops. You have to take your mouse out of input to regain access to scrolling, which can be resolved.
I have no problem reprogramming the scroll to input when it has focus in order to scroll through the options, but I don't want it to automatically accept it.
source to share
Here we have solved this problem. We've bound a function to a target that monitors the scroll event. The target receives a quick mask element that is displayed when the mask is scrolled, thereby preventing the event object from scrolling.
Since the outer element is scrolling, the target element will not hold the scroll event for an extended period of time. Attach a timeout of say 500ms to let the target know you want to scroll the target.
function scrollUninterruptable(elem) {
var scrollTimer = null,
scrollMask = $('<div>', { 'style': 'position: absolute; right: 0; left: 0; top: 0; bottom: 0;', 'class': 'scrollMask' }).hide();
elem = $(elem);
elem.append(scrollMask);
elem.parent().off('scroll.uninterruptably').on('scroll.uninterruptably', function() {
elem.css('position', 'relative');
scrollMask.show();
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
elem.css('position', '');
scrollMask.hide();
}, 500);
});
}
Again, this is just watching the scroll event attach a 500ms timeout and then hide the mask that will trigger the scroll event on the target.
source to share