React应用中overflow属性导致window.scrollY取值异常如何解决？

问题根因 #

你给.app .mask设置了overflow:auto，同时该元素是绝对定位撑满整个视口的，此时页面的滚动行为发生在mask元素内部，而非window全局，所以window.scrollY永远返回0，自然无法正常取值。
当你移除overflow:auto后，mask的内部内容会溢出到外层，滚动行为回到window上，window.scrollY可以正常取值，但此时mask是绝对定位脱离文档流，父元素.app的高度只有min-height:100vh，不会跟着内部内容撑高，所以背景图只能覆盖100vh的高度，超出部分就出现空白，效果如下图：

解决方案（二选一即可） #

方案1：修改滚动监听对象，适配现有CSS #

不需要改动现有样式，只需要把原来监听window滚动的逻辑，改成监听mask元素的滚动即可，修改你的Test组件代码：

import React, { useEffect, useState } from "react";

export default function Test() {
  const [offset, setOffset] = useState(0);
  const setScroll = (e) => {
    // 从mask元素取滚动高度
    setOffset(e.target.scrollTop);
  };

  useEffect(() => {
    // 获取mask元素
    const maskEle = document.querySelector('.app .mask');
    maskEle.addEventListener("scroll", setScroll);
    return () => {
      maskEle.removeEventListener("scroll", setScroll);
    };
  }, []);

  return (
    <div>
      <div style={{color:"red"}}>{offset}</div>
    </div>
  );
}

方案2：调整CSS结构，让window成为滚动容器 #

修改样式逻辑，移除mask的绝对定位和overflow属性，让滚动行为回归window，同时保证背景自适应内容高度：
首先修改custom.css的对应代码：

/* 先重置全局默认边距 */
html, body {
  margin: 0;
  padding: 0;
}

.app .mask{
  /* 移除原有绝对定位、上下左右置0、overflow:auto属性 */
  min-height: 100vh;
  color:#fff;
  background-color:rgba(0, 0, 0, 0.6);
}

调整后滚动的就是window，你原来的window.scrollY监听代码可以正常使用，背景图也会跟着父元素.app的高度自动撑开，不会出现底部空白。

内容的提问来源于stack exchange，提问作者Ritcus