I'm kind of new to programming, and I'm trying to learn new methods and ways ... Can you show me how to create an element on a page with some background whose color shade changes as the mouse wheel scrolls “vertically” and scrolls horizontally (WheelEvent). It is recommended to set the color in HSL format. Thank you in advance.

Closed due to the fact that off-topic by meine , 0xdb , aleksandr barakin , freim , Andrew Goroshko May 14 at 13:12 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on the condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- meine, 0xdb, Andrew Goroshko
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • I do not have a horizontal wheel on the mouse - Stranger in the Q
  • you need to make the element itself with some background in size larger than the monitor. What would appear moving the bottom bar for scrolling, so to speak. - Anya Yeskina
  • I updated the answer - Stranger in the Q

1 answer 1

Vertical scroll changes saturation

horizontal - lightness

 let m = 25, a = 60, s = m, l = m, d = document.documentElement; window.addEventListener('scroll', function(e) { s = m + a * d.scrollTop / (d.scrollHeight - d.clientHeight); l = m + a * d.scrollLeft / (d.scrollWidth - d.clientWidth); updateColor(); }); function updateColor() { document.querySelector('#square').style.backgroundColor = `hsl(150,${s}%,${l}%)` }; updateColor(); 
 <body style="margin:0"> <div id="square" style="width:1500px; height:1500px;"></div> </body>