2024 04 28 scroll position

listening for scroll position

scroll could be a potential ux interactive that could influence the style of information.

%%html
<div id="thing">
<div>stuff
    </div>
</div>
<style>
#thing {
    max-height: 10rem;
    position: relative;
    &::before {
        position: sticky;
        left: 0;
        top: 0;
        content: "y:" attr(data-scroll-y) ", x:" attr(data-scroll-x);
    }
    overflow-y: auto;
    >div{
        vertical-align: bottom;
        width: 300vw;
        height: 100rem;
            background-color: rgba(255,255,255,var(--scroll-y));
        &::after {
            display: block;
            position: sticky;
            bottom: 0;
            content: "end";
        }
    }
}
</style>
<script>
thing = document.getElementById("thing");
thing.addEventListener("scroll", (event) => {
    let target = event.target;
    let y = (target.scrollTop) / (target.scrollHeight - target.clientHeight);
    let x = (target.scrollLeft) / (target.scrollWidth - target.clientWidth);
    thing.style.setProperty("--scroll-y", y);
    thing.style.setProperty("--scroll-x", x);
    thing.dataset.scrollY = y;
    thing.dataset.scrollX = x
});
</script>

stuff