how to detect user mouse scroll up event but not really trigger window scroll?

Question

I try to do some page transition like this web. https://www.lytic.tech/ .

But I cannot figure out how to detect the mouse "scroll event" but not really trigger window scrolling, especially hide the scrollbar.

I try to set body overflow: hidden and try to set my container to overflow: auto to scroll only inside my container.
But it seems to block all the scrolling event.

I think you will find the answer to your question here: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — chrismclarke, Aug 26 '19 at 11:40
Possible duplicate of [How to disable scrolling temporarily?](https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) — chrismclarke, Aug 26 '19 at 11:40
I try the disable scrolling solution but it's not disable the scrolling. :/ And also I not only want to disable scrolling, but also detect the event. So I think it's not duplicated. Thanks for your comment. — 鄭元傑, Aug 27 '19 at 02:22
You should be able to modify the code in the link I sent to trigger another function, e.g. window.onwheel = (e) => {e.preventDefault; console.log('scroll attempted')} — chrismclarke, Aug 27 '19 at 08:11
I would like to stop div element to scroll. is that possible ? — 鄭元傑, Aug 28 '19 at 04:52
鄭元傑, you should ask a new question for that and include a copy of the code you are using — chrismclarke, Aug 28 '19 at 09:23

score 0 · Answer 1 · answered Aug 26 '19 at 12:56

Add this css. I hope it will helps you.

html, body{
    height: 99%;
    overflow:hidden;
}

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; 
    box-sizing: content-box; 
}

how to detect user mouse scroll up event but not really trigger window scroll?

1 Answers1