0

https://codesandbox.io/s/gallant-dust-xjnsj?file=/src/Demo.tsx

Materail ui/mui 高度整体不工作不知道材料 ui 如何计算它的高度 希望是否有人可以使用反应弹簧帮助解决这个错误，我也测试了 window.scrollY 它甚至不能正常工作，整体 window.innerheight 从来没有工作过不知道为什么材料 ui 甚至没有帮助我弄清楚他们的 github 问题中发生了什么，如果有人能帮助我真的很感激


    const size = UseWindowSize();

    // Ref for parent div and scrolling div
    const app = useRef();
    const scrollContainer = useRef();
  
    // Configs
    const data = {
      ease: 0.1,
      current: 0,
      previous: 0,
      rounded: 0
    };
  
    // Run scrollrender once page is loaded.
    useEffect(() => {
      requestAnimationFrame(() => skewScrolling());
    }, []);
  
    //set the height of the body.
    useEffect(() => {
      setBodyHeight();
    }, [size.height]);
  
    //Set the height of the body to the height of the scrolling div
    const setBodyHeight = () => {
      document.body.style.height = `${
        scrollContainer.current.getBoundingClientRect().height
      }px`;
    };


    const skewScrolling = () => {
      //Set Current to the scroll position amount
      data.current = window.scrollY;
      // Set Previous to the scroll previous position
      data.previous += (data.current - data.previous) * data.ease;
      // Set rounded to
      data.rounded = Math.round(data.previous * 100) / 100;
  
      // Difference between
      const difference = data.current - data.rounded;
      const acceleration = difference / size.width;
      const velocity = +acceleration;
      const skew = velocity * 7.5;
  
      //Assign skew and smooth scrolling to the scroll container
      scrollContainer.current.style.transform = `translate3d(0, -${data.rounded}px, 0) skewY(${skew}deg)`;
  
      //loop vai raf
      requestAnimationFrame(() => skewScrolling());
    };


import { useState, useEffect } from "react";

export default function UseWindowSize() {
  function getSize() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  }

  const [windowSize, setWindowSize] = useState(getSize);

  useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}```
4

0 回答 0