I have a big gantt chart to show on mobile and it must be scrollable. That is when I created a div.scroll-overlay at the same level using for scrolling purpose. However, as well as its supporting for swipe scrolling, it prevents us from all the touch actions that supported by the div.content and inside - We are unable to click by touching on the div.content no more. I trial and error with CSS touch-action and event-pointer but nothing works so far.
Problem
- Need
div.scroll-overlayso that we can scroll on mobile but because of it we cannot touch/clickdiv.content - Cannot scroll directly on
div.contentsince it has too manytouch actionsbehind the scene that prevent scrolling.
My idea is to make it click/touch through the div.scroll-overlay, so div.content or whatever inside is clickable whilst div.scroll-overlay is still scrollable.
Here is the Codepen illustrating the scenario. It does not reflect fully the div.content with many clickable actions inside.
Please advice me if you have any solution in mind. Thanks