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

Question

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

我如何检测滚动时，通过css viewport视角的变化?

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

Answer 2

这里的关键是检测视差元素内的滚动——在单帧div内。

你可以这样写:

const handleScrolling () => if (window.scrollY || window.pageYOffset < totalheight) requestAnimate() 
$('.parallax').on('scroll', handleScrolling);