I was adding mouse wheel events to a ul element with the CSS rule overflow:hidden to emulate mouse wheel scrolling when no scrollbar was present.
The links in the unordered list also trigger a Bootstrap 4.1 Modal that contains a Bootstrap Carousel. So I decided to add the same functionality to my modal carousel gallery.
$('#my-carousel').on('wheel mousewheel DOMMouseScroll', function(event) {
var delta = event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail;
if (delta) {
$(this).carousel((delta > 0 ? 'prev' : 'next'));
}
});
Note: You can reverse the scroll direction by changing the comparison to delta < 0 or swap the order of ‘next’ and ‘prev’.
This method can be applied to any Bootstrap Carousel. Mine just happened to be in a Bootstrap Modal dialog. This example can also be a good starting point for adding mouse wheel events to any element where wheel navigation is desired but not automatically supported 😉
I have sections above and below the carousel, though the mousewheel function works, but the screen also moves up and down, is there any way to control it as well ?
Could be browser specific or maybe you have a gaming mouse? The latter sends a massive number of wheel/move events vs. conventional mice.
Don’t think you can kill the event to prevent over-scrolling since each movement is an individual event ♂️