There is an image causing issues with scrolling on a mobile device because it's located in the finger-friendly area where people tend to scroll. I attempted to use pointer-events: null; to allow scrolling, but this also prevented the click event from working since the image is a button.
I tried using JavaScript to override the CSS property, but it didn't work as expected. Is there another way to achieve this?
CSS
.element-id {
position: fixed;
pointer-events: none;
}
Function
$('#element-id').click(function(){
$('#entrevista').toggleClass('ws-visible');
$('#video').get(0).play();
});
EDIT:
The issue is that a fixed position element is disrupting the normal scrolling behavior of the page.
While researching online, I came across "bubbling" but I'm not sure how it could be relevant here. From my understanding, it allows events to travel down through the DOM hierarchy, but I'm unsure if it can help resolve this particular issue. Can someone clarify how bubbling works in this context?