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

Question

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

在CSS视口透视图中滚动时如何检测滚动变化？

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

由于在.parallax上设置了overflow属性，您将检查滚动而不是窗口滚动。

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

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

});

Answer 2

这里的关键是检测视差元素内的滚动-在单个帧格内。

所以您可能会做类似的事情：

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

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