css - 在除 Firefox 之外的旧版浏览器上使用滚动事件对 css 进行动画处理的奇怪行为

Question

我正在使用 css 网格制作一个简单的画廊，我正在尝试在用户向下滚动时为元素之间的间隙设置动画。但我不知道为什么我在 chrome 和 edge 上会出现这种奇怪的行为，即当我尝试滚动时，每个元素的高度都会缩小。它在 firefox 中运行良好，引擎盖下的一切似乎都运行良好，我没有收到任何错误，我在我的 css 上尝试了 autoprefixer，但它没有任何帮助。

<div class="container" id="container">
    ...images goes here (sm,md,lg classes)
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(10%, 20%);
  grid-auto-flow: dense;
  transition: all 1s;
  transition-delay: 0.1s;
  gap: 1rem;
  padding: 0 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.sm {
  grid-row: span 1;
}
.md {
  grid-row: span 5;
}
.lg {
  grid-row: span 6;
}

.scroll-animation {
  gap: 0.1rem;
  padding: 0 0.1rem;
}

let lastScrolled = 0; // Number of pixels the user has scrolled in the last event
// Basically we want to add "scroll-animation" to the container when the user scrolled down

// This state controlls event calls
let fired = false;

window.addEventListener('scroll', (e) => {
  const scrollable = document.documentElement.scrollHeight - window.innerHeight; // Numbers of pixels the user can scroll
  const scrolled = window.scrollY; // Number of pixels the user has scrolled

  if (fired === false) {
    fired = true;
    // If the user scrolls down the scrolled value increases and vice versa
    // So basically
    if (scrolled < lastScrolled) {
      // Then the user scrolled up
      console.log('GET OUT! YOU SCROLLED UP!');
      // But you should update the lastScrolled value nonetheless
      lastScrolled = scrolled;
      setTimeout(() => {
        // not the best kind of solution
        fired = false;
      }, 500);
      return; // And then get out!
    }

    // Before we continue
    // It gets weird when it reaches the bottom of page so i had to add this fix
    // Checks if the user scrolled all the way to the bottom of page and returns
    if (Math.ceil(scrollable) === scrolled) {
      console.log('STOP!');
      fired = false;
      return;
    }

    // And finally you need a setTimeOut function for this to work
    // Because you need to add and remove the "scroll-animation" class between some kind of time interval

    // Add class as soon as the scroll event starts
    container.classList.add('scroll-animation');

    // And remove it after the time interval
    setTimeout(() => {
      container.classList.remove('scroll-animation');
      fired = false;
      console.log('Scrolling has stopped.');
    }, 1050);
  }
  lastScrolled = scrolled; // The value gets updated in any case
});

Codepen

Answer 1

出于某种原因，如果不指定 height，div.container 会变得疯狂

grid-gap: 0.1rem 属性似乎导致了问题。

html, body {
  height: 100%;
}

.container {
  height: 100%;

  ...rest...
}

还有 grid-column: span minmax(2, 3); 不起作用。