Detecting scroll behavior with css perspective

Question

I have a very simple parallax example set up but am noticing that changes to window.scrollY are not occurring (it's always 0) when scrolling through my elements. It's as if because we're just moving through a perspective, javascript doesn't detect any scrolling.

How can I detect scroll changes when scrolling through css viewport perspective?

I have my css setup as follows:

* {
        margin:0;
        padding:0;
    }
    body {

    }
    .parallax  {
        overflow-x:hidden;
        overflow-y:auto;
        perspective:1px;
        height:200vh;
    }
    .back {
        background-color:#fff;
        height:100vh;
        transform:translateZ(-1px) scale(2);
    }
    .base {
        transform:translateZ(0);
        background-color:#fff;
    }
    .parallax__layer {

        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;

        display:block;
    }
    .title {
        text-align:center;
        position:absolute;
        left:50%;
        top:50%;
        color:blue;
        transform:translate(-50%, -50%);
        display:block;
    }

And my dom content is:

<div class="parallax">
    <div class="parallax__layer back">
        <div class="title">test</div>
    </div>
    <div class="parallax__layer">
        <div class="title">image</div>

            <div class="frame">
            test frame
            </div>
    </div>
</div>

Answer 1

The key here is to detect scroll within the parallax element -- within a single frame div.

So you might do something like:

const handleScrolling () => if (window.scrollY || window.pageYOffset < totalheight) requestAnimate() 

$('.parallax').on('scroll', handleScrolling);