我有一個 CSS 關鍵幀動畫，當元素滾動到視圖中時，通過將類添加到我只想在它們滾動到視圖中時設置動畫的元素。它在 Firefox 中按預期工作，但由于某種原因它在 Chrome 中不起作用。開發人員工具表明，即使元素在視口中，也沒有將start類添加到其中。任何想法為什么這在 chrome 中不起作用？查詢：function isElementInViewport(elem) {    var $elem = $(elem);    // Get the scroll position of the page.    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');    var viewportTop = $(scrollElem).scrollTop();    var viewportBottom = viewportTop + $(window).height();    // Get the position of the element on the page.    var elemTop = Math.round($elem.offset().top);    var elemBottom = elemTop + $elem.height();    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));}// Check if it's time to start the animation.function checkAnimation() {    var $elem = $('.parent-content-block .slide-in');    // If the animation has already been started    if ($elem.hasClass('start')) return;    if (isElementInViewport($elem)) {        // Start the animation        $elem.addClass('start');    }}// Capture scroll events$(window).scroll(function () {    checkAnimation();});document.addEventListener("DOMContentLoaded", function() {  var elements = document.querySelectorAll(".slide-in");  // Intersection observer  var observer = new IntersectionObserver((entries) => {    entries.forEach((entry) => {      if (entry.intersectionRatio > 0) {        entry.target.classList.add("start");      }    });  });  elements.forEach((el) => {    observer.observe(el);  });});<div>  <img class="slide-in slide1" src="img.png">  <div style="height: 200vh">    scroll down  </diV>  <img class="slide-in slide1" src="img.png">  <img class="slide-in slide2" src="img.png">  <!-- other html... --></div>