滚动时背景被剪裁

【问题标题】：The background is clipped when scrolling滚动时背景被剪裁
【发布时间】：2021-09-14 10:48:48
【问题描述】：

在我的 React 应用程序中，我在小高度屏幕上遇到了问题：当我滚动侧边栏菜单时，背景（背景颜色）被剪裁并且不会拉伸到完全滚动高度

【问题讨论】：

标签： reactjs scroll jsx use-effect use-ref

【解决方案1】：

问题是高度设置为100vh。

在大屏幕上是完美的。但是在小屏幕上，我们现在不知道真正的滚动高度——它取决于浏览器窗口的分辨率

我们需要使用 useRef Hook 并观察元素的滚动高度变化

const appMenuRef = useRef(null)
const [fullHeight, setFullHeight] = useState('100vh')

useEffect(() => { 
    if (!isNull(appMenuRef.current)) {
      setFullHeight(`calc(${appMenuRef.current.scrollHeight - appMenuRef.current.scrollTop}px)`)
    }
  }, [appMenuRef])

现在我们可以将此 fullHeight 作为 css 内联属性设置为有问题的元素

【讨论】：