Angular cdk-virtual-scroll-viewport mouse scrolling not working in horizontal orientation with mouse wheel only

Question

Is there any way to activate mouse scrolling in the cdk-virtual-scroll-viewport for the horizontal orientation?

As we can also see in the example from angular material, you can scroll only by dragging from the scrollbar, but you can't scroll just by using the mouse scroll wheel.

https://material.angular.io/cdk/scrolling/overview

My intention is to have a component with images like in Netflix and to scroll through them just by using the mouse scroll wheel.

The second question is: Does anybody have an example for this?

I would like to achieve something like this:

https://codepen.io/CalvinMorett/post/incorporate-horizontal-scrolling-mousewheel

Answer 1

Ran into this same issue today and had some trouble to find anything online. Here's what I did find and what worked for me:

https://www.damirscorner.com/blog/posts/20211022-MouseWheelScrollingInAngular.html

This guide is not specific to cdk, but can be used with it too.

Basically, create a new Directive, listen for the mouse scroll event and then offset the elements' position by the mouse delta.