使用 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 上设置的，因此您将检查是否在其上滚动而不是 window:

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

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

});

Answer 2

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

所以你可以这样做：

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

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

使用 css 视角检测滚动行为

Detecting scroll behavior with css perspective

javascript

css

scroll

parallax