JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="scrollDemo">
        <p>JavaScript scrollLeft / scrollTop</p>
    </div>
    <div class="output"></div>
    
    <div id="test"></div>

CSS

#scrollDemo {
            height: 200px;
            width: 200px;
            overflow: auto;
            background-color: #f0db4f
        }

        #scrollDemo p {
            /* show the scrollbar */
            height: 300px;
            width: 300px;
        }
        
        #test { height: 200px;
            width: 200px;
            background-color: red;

JavaScript

const scrollDemo = document.querySelector("#scrollDemo");
const output = document.querySelector(".output");
var test = document.getElementById('test');

scrollDemo.addEventListener("scroll", event => {
output.innerHTML = `scrollTop: ${scrollDemo.scrollTop} <br>
scrollLeft: ${scrollDemo.scrollLeft} `;

var newFig = (100 - (scrollDemo.scrollTop / 2));

test.style.opacity = newFig + "%";


                                
                                
}, { passive: true });