1

I have an image which is avoiding users to scroll when cursor is over and it is in a very bad position because it is in the mobile finger-friendly area where almost everyone make scroll. I tried with pointer-events: null; and then it was possible to scroll, but this image is a button and the click event is obviously also prevented now.

I tried to apply it through JavaScript, but it doesn't override the CSS property, so I was wondering if there would be a way to do it.

CSS

.element-id {
    position: fixed;
    pointer-events: none;
}

Function

$('#element-id').click(function(){
    $('#entrevista').toggleClass('ws-visible');
    $('#video').get(0).play();
});

EDIT:

My problem is that a fixed positioning element is affecting the regular scroll behavior of the page.

I found "bubbling" searching through internet but I don't understand it very well. Is it something that could help here? Because if I understood the basics, it makes the event go deeper in the DOM so I suppose it is propagated from the upper element to the lower. Is this how it works?

Pablo C
  • 62
  • 1
  • 7

1 Answers1

1

Maybe not an optimal solution, but it works...

Step #1:
Remove the pointer-events: none; style.

Step #2:
Get the scrolling on the non scrollable image using the wheel (old browsers mousewheel) event. The scrolling is not provided by the image but can be calculated with the wheel event. To achieve this I highly recommend using jQuery and the jQuery Mouse Wheel Plugin. It does this calculation for you. See also this question.

Step #3:
Manually pass the scroll on to the element that should be scrolled by using JavaScript's native Element#scroll(...) (or also jQuery).

Edit

Please read the comments of this answer, to understand why this is not a duplicate of the question Manually trigger a scroll event of DOM element? and why the answer to this other question might help you better.

halfer
  • 19,824
  • 17
  • 99
  • 186
Niklas E.
  • 1,848
  • 4
  • 13
  • 25
  • This is what's suggested by https://stackoverflow.com/questions/26252164/manually-trigger-a-scroll-event-of-dom-element – Ruan Mendes Mar 13 '20 at 13:55
  • @JuanMendes ah... not quite. Non-scrolling objects do not fire a scroll event! The question is neither a duplicate of it nor does the top solution given help! – Niklas E. Mar 13 '20 at 14:00
  • It does, it says you should manually set the scroll of the body (other element)? I did link to the wrong question initially, I'll reopen it if you explain why you don't agree. – Ruan Mendes Mar 13 '20 at 14:03
  • @JuanMendes It says, but it is not the same situation as in the other question and it need a different solution. The solution given by your duplicate question isn't helpful for the user that ask. Therefore it is not a duplicate! scroll events cannot be passed like that, in this case! – Niklas E. Mar 13 '20 at 14:05
  • @JuanMendes Please remove the duplicate flag to that question. – Niklas E. Mar 13 '20 at 14:08
  • I don't follow. The accepted answer says `$('.e1').scroll(function(e){ $('.e2').scrollTop(parseInt($('.e1').scrollTop())); });` which is exactly what you are suggesting, except that `.e2` is the body in this case... There are minor differences, but the idea is the same. Set the scroll of the other one manually, I will remove it if you convince me (or someone else who has the rep to do it). We don't need a separate answer to spoon feed answers catered specifically to a question. You have to argue why that answer is not enough. – Ruan Mendes Mar 13 '20 at 14:08
  • 1
    No. mousewheel and scroll are to highly diffenent events in js! That is not what I suggesting! It is different for the reason that mousewheel is also fired on non-scrollable objects. and $('.e1').scrollTop() does not provide scroll top informatin if its not scrolable! It is a completely different situation! – Niklas E. Mar 13 '20 at 14:11
  • Reopened. I'd suggest you explain that difference and the problem in the answer itself. We typically want to explain why, not just post a solution. – Ruan Mendes Mar 13 '20 at 14:13
  • 1
    @JuanMendes I'm sorry, I didn't provide enough information in my solution and about the mousewheel and scroll event. I also didn't explain why I recommend the "jQuery Mouse Wheel Plugin". I'll edit my answer. I'm still a little newbie on that site. – Niklas E. Mar 13 '20 at 14:17
  • Note that mousewheel event is deprecated https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event You should not use it in new code. `This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible` This means this is not a good solution, I think the answer I linked to originally is the better way. – Ruan Mendes Mar 13 '20 at 14:56
  • @JuanMendes Yeah... but as I recommend, you should use the jQuery plugin. It takes care of it. it will be replaced with the "wheel" event, which is already been implemented in the plugin. see https://stackoverflow.com/questions/14926366/mousewheel-event-in-modern-browsers – Niklas E. Mar 13 '20 at 15:14
  • There is a supported event without the need for a plugin https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event You should replace mousewheel with wheel in your answer, because wheel replaces the mousewheel event – Ruan Mendes Mar 13 '20 at 15:23
  • Note: answers generally should not say "read comments below" because **the comments may be deleted in the future**. Ideally, please edit your answer to give an explanation independent of these comments. Thanks! – halfer Mar 14 '20 at 00:40
  • Sorry guys for motivating this argue. I have been working on it and what I discovered is that it is not allowing scroll because of fixed positioning so I hope it should be simpler than any other solution you are talking about on this thread. Sorry if I didn't explained myself as good as I should and thank you for your time. I'll continue investigating because I used position absolute and now it scrolls and allow clicking but didn't find the proper solution yet. – Pablo C Mar 15 '20 at 15:45