为什么即使元素不在视口中，我的函数也为什么添加一个类？

Question

我对其他问题遵循了一些建议，即如何在滚动时在屏幕上看到元素时向元素添加类。 我一直得到相同的结果：当我开始滚动时，即使我的元素不可见，也会添加该类。

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top ,
        elemBottom = elemTop + $(elem).outerHeight();

    return ((elemBottom  <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on("scroll", function() {

    $('#card1').each(function() {
        if (isScrolledIntoView(this)) {
            $(this).addClass('cardScroll');
            console.log('Class added');
        } else {
            $(this).removeClass('cardScroll');
        }
    });

});

当我从页面顶部开始滚动并且我的元素（＃card1）仅在页面中间时，“添加的类”将保持记录。

HTML：

<div class="col-lg-4 d-flex justify-content-around">
    <div  class="card" id="card1" style="width: 18rem;">
        <div class="rounded-div">
            <img class="card-img-top" src="" alt="">
         </div>
         <div style="text-align: center;" class="card-body">
             <h5 class="card-title">Dummy Text</h5>
             <p class="card-text">Dummy text</p>  
          </div>
     </div>
  </div>

CSS：

.cardScroll {
        background-color: #d1e4f3;
        box-shadow: 10px 10px 16px 0 rgb(31, 31, 31);
        -webkit-transition: box-shadow 0.3s ease-out;
        -moz-transition:  box-shadow 0.3s ease-out;
        -o-transition:  box-shadow 0.3s ease-out;
        transition: box-shadow 0.3s ease-out;
    }

Answer 1

我将isScrolledIntoView函数更改为以下内容，似乎可以解决此问题：

function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;

// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

我在这里找到了答案， 如何在滚动后检查元素是否可见？

Answer 2

您不应.on('scroll')使用.on('scroll') ，因为这可能会导致性能问题。

对于像您这样的问题，您可以轻松地使用“ 相交观察器”（IO）和IO，您可以检测到元素何时可见（或离开）并对其做出反应。

首先，您必须设置IO的选项并创建它：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

如果我们从选项中忽略“ root”，我们将观察整个窗口。 并使用“阈值”定义我们希望“回调”功能在至少100％可见时执行。

然后我们定义我们要观察的元素，在您的情况下将是“卡片”

var target = document.querySelector('.card');
observer.observe(target);

最后，我们必须定义我们说要在“ card”元素完全可见后执行的回调函数：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
  });
};

编辑：如果您需要比使用w3c的（官方）polyfill支持更旧的浏览器，它将通过侦听滚动事件来重新创建交叉观察器。 因此，在较旧的浏览器上，它的速度仍然会变慢，您在此无能为力。 但是在较新的产品上，性能会有所提高。