时间戳

首页 > 解决方案 > 滚动时背景被剪裁

reactjs - 滚动时背景被剪裁

问题描述

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

标签： reactjsscrolljsxuse-effectuse-ref

解决方案

问题是高度设置为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 内联属性

推荐阅读