title: Detecting scroll behavior with css perspective
body: <p>I have a very simple parallax example set up but am noticing that changes to <code>window.scrollY</code> are not occurring (it's always <code>0</code>) when scrolling through my elements. It's as if because we're just moving through a perspective, javascript doesn't detect any scrolling.</p>
  
  <p>How can I detect scroll changes when scrolling through css viewport perspective?</p>
  
  <p>I have my css setup as follows:</p>
  
  <pre><code>* {
          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;
      }
  </code></pre>
  
  <p>And my dom content is:</p>
  
  <pre><code>&lt;div class="parallax"&gt;
      &lt;div class="parallax__layer back"&gt;
          &lt;div class="title"&gt;test&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="parallax__layer"&gt;
          &lt;div class="title"&gt;image&lt;/div&gt;
  
              &lt;div class="frame"&gt;
              test frame
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>