滚动时背景被剪裁

Question

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

Answer 1

问题是高度设置为100vh。

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

我们需要使用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 内联属性到有问题的元素

滚动时背景被剪裁

The background is clipped when scrolling

scroll

jsx

reactjs

use-effect

use-ref