javascript - 使用 css 透视图检测滚动行为

Question

我设置了一个非常简单的视差示例，但我注意到在滚动元素时没有发生对 window.scrollY 的更改(它始终为 0)。就好像因为我们只是在一个透视图中移动，javascript 没有检测到任何滚动。

在 css viewport perspective 中滚动时如何检测滚动变化？

我的 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;
    }

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

Answer 1

因为 overflow 属性是在 .parallax 上设置的，所以你会检查在那个而不是窗口上滚动:

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

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

});