Scroll event not working horizontally

Question

I have a code with window.onscroll, but if I change the width of the document to enable horizontal scrolling (remove // in JS line 5), the scroll event stops firing altogether.
https://code.sololearn.com/WreJnlyKVNq5/?ref=app

Answer 1

Abdun Nur Porag
When you copy text from ChatGPT and Co., you are required to cite your sources properly

Answer 2

The scroll event is working, but because the body width is larger than the screen width, the app is actually scrolling over the document instead of the doc scrolling over its contents. (If that makes sense 🤔)

If you change both the width and the height of the body to 3000px, you'll see effects you expected as scroll closer to one end or the other.

It's rare to see the body wider the screen on mobile devices.

Creating a div where the width and height are larger, then the body's width and height should result in the desired effects. You will need to use scrollTop and scrollLeft

Answer 3

What was supposed to happend when you scroll on x?

Answer 4

Anton Drud The background color should change. The thing is, the scroll event isn't even triggered.

Answer 5

I am pretty sure it is because there is nothing to scroll on, on the x axis. But im not 100% sure. Have you tried drag events.

Answer 6

Abdun Nur Porag What do you mean? I haven't used scrollTop in my code, I used scrollX and scrollY. Also, I don't have a progress bar. The problem is not within the onscroll function because if you replace the code in the function with "console.log('.')", you'll see that it still doesn't do anything.

Answer 7

Sorry,i can not write my full code and information here