JS for defining CSS3 variable --scroll, to make effects based on the scroll of a window

scrolling.js

//put in function to be executed once elements with class="scrolling" have loaded
for (let el of document.querySelectorAll(".scrolling")) {
	el.addEventListener("scroll", evt => {
		let maxScroll = el.scrollHeight - el.offsetHeight;
		let scroll = el.scrollTop / maxScroll;
		el.style.setProperty("--scroll", scroll);
	});
}

// Put in CSS rules.
// .scrolling {
// 	 background-image: linear-gradient(to right, white calc(100 * var(--scroll)), transparent 0)
// }