如何逐像素调整滚动标题的大小答案

【问题标题】：How to resize header on scroll pixel by pixel如何逐像素调整滚动标题的大小
【发布时间】：2020-06-10 13:47:05
【问题描述】：

我有一个导航栏标题，我正在根据滚动调整其高度（逐个像素调整大小，最大 100 像素和最小 56 像素）。我试图设置滚动状态，但滚动速度总是比计算和更新状态的速度快，这会导致错误的新值。

导致这样的混乱

跑得更快

慢慢滚动

我们非常感谢停止滞后或更好实施的想法。

  const [newHeader, setCount] = useState(100);
    const classes = useStyles();
    useEffect(() => {
      window.onscroll = function () {
        var pixel = window.scrollY;
        setCount(100 - pixel)
        // var newHeader = 100 - pixel;

    if (newHeader > 56) {
        document.getElementById('header_container').setAttribute("style", "height:" + newHeader + "px");
       }
     }
 });

【问题讨论】：

我认为你需要使用字体大小，如果你想改变标题大小容器你需要添加高度和宽度
另一边你可以为每个滚动添加一个乘数，例如pixel/10
我不太清楚你所说的乘数是什么意思，你能不能写一个小脚本并将其作为答案推送@JuanCaicedo 你会成为一个救生员
像素除以 100，或像素 *0.01
添加这个，现在标题变得固定（不再缩小）`style，min-height: 56px; max-height: 100px; height: ${newHeader} px`@JuanCaicedo

标签： javascript css reactjs sass react-hooks

【解决方案1】：

您需要设置最大和最小限制。

试试这个。


    window.onscroll = function() {
      const maxHeight = 100;
      const minHeight = 56;
      let pixel = window.scrollY;
      let pixelPosition =  maxHeight - pixel;
      pixelPosition = pixelPosition > maxHeight ? maxHeight : pixelPosition;
      pixelPosition = pixelPosition < minHeight ? minHeight : pixelPosition;
      document
        .getElementById("header_container")
        .setAttribute("style", "height:" + pixelPosition + "px");
    };

【讨论】：

非常感谢 fam，+1 你拯救了我的一天