js 代码适用于 firefox，但不适用于 chrome opera 和 edge答案

【问题标题】：a js code works on firefox but not on chrome opera and edgejs 代码适用于 firefox，但不适用于 chrome opera 和 edge
【发布时间】：2021-06-05 03:37:20
【问题描述】：

此 js 代码在元素可见时为添加动画的元素提供了一个类。它适用于 mozilla，当元素可见时，他将类赋予元素，但是当我在 chrome 和其他基于 chromium 的 Web 浏览器上进行测试时，它不起作用。我已经使用元标记添加了 jquery（为了证明，它在 firefox 下工作）

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));
}

function checkAnimation() {
  for (el = 1; el < (document.getElementsByClassName('partner').length + 1); el++) {
    var elem = document.querySelector('.partner:nth-child(' + el + ')');
    console.log(el);
    console.log(elem);

    if (isElementInViewport(elem)) {
      // Start the animation
      elem.classList.add('visible');
    }
  }
  el = 1
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

<link href="https://dev2020.theelderguardian.fr/stylesheet.css" rel="stylesheet"/>
<link href="https://dev2020.theelderguardian.fr/partner.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="partner_1" class="partner">
                <figure class="partner_logo"><img class="logo" src="resources/assets/logos/partner_1.png"></figure>
                <div class="partner_desc">
                    <h3>Partner</h3>
                    <p>A great partner</p>
                    <div class="social">
            <div class="website"><a href="example.com" target="_blank" rel="noopener"><i class="fas fa-globe fa-2x" style="color:#3c88c2;"></i></a></div>
            <div class="discord"><a href="discord.gg'" target="_blank" rel="noopener"><i class="fab fa-discord fa-2x" style="color:#7289DA;"></i></a></div>
            <div class="twitter"><a href="https://twitter.com/partner" title="@partner" target="_blank" rel="noopener"><i class="fab fa-twitter fa-2x" style="color:#1da1f2;"></i></a></div>
            <div class="youtube"><a href="youtu.be" target="_blank" rel="noopener"><i class="fab fa-youtube fa-2x" style="color:#ff0000;"></i></a></div>
            <div class="instagram"><a href="https://instagram.com/partner" title="@partner" target="_blank" rel="noopener"><i class="fab fa-instagram fa-2x" style="color:#e1306c;"></i></a></div>
            <div class="other_link"><a href="example.com" target="_blank" rel="noopener"><img src="https://www.google.com/s2/favicons?domain=example.com"></a></div>
                    </div>
                </div>
            </div>

【问题讨论】：

为什么不到处使用 jQuery。 jQuery 整合了在不同浏览器上可能不同的东西
我给你做了一个sn-p。请添加相关HTML
我的印象是问题来自 jquery，在调试器中错误出现在“querySelectorAll”
奇怪的是，该代码在 firefox 上有效，但在基于 chrome 的浏览器上无效

标签： javascript html jquery cross-browser

【解决方案1】：

好的，我刚刚测试了另一个代码，这次它适用于所有浏览器

window.addEventListener("scroll", function() {
    for (el = 1; el < (document.getElementsByClassName('partner').length + 1); el++) {
        var elem = document.querySelector('.partner:nth-child(' + el + ')');
        console.log(el);
        console.log(elem);

        console.log("invisible: ", isElementInViewport(elem));

        if (isElementInViewport(elem)) {
            elem.classList.add("visible");
        }
    }
});

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <=
          (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

【讨论】：