javascript - 使用CSS透视图检测滚动行为(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.(我设置了一个非常简单的视差示例，但注意到在滚动元素时不会发生对window.scrollY更改（始终为0 ）。)

It's as if because we're just moving through a perspective, javascript doesn't detect any scrolling.(好像是因为我们只是在透视图中移动一样，所以javascript不会检测到任何滚动。)

How can I detect scroll changes when scrolling through css viewport perspective?(在CSS视口透视图中滚动时，如何检测滚动变化？)

I have my css setup as follows:(我的css设置如下：)

* {
        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:(我的dom内容是：)

<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>

  ask by Learning stats by example translate from so

Answer 1

Since the overflow property is set on .parallax you would check for scrolling on that instead of the window:(由于溢出属性是在.parallax上设置的，因此您需要检查滚动而不是窗口滚动：)

$('.parallax').on("scroll", function(){

    var scrollPosition = $(this).scrollTop();

});