时间戳

首页 > 解决方案 > 为什么即使元素不在视口中，我的函数也会添加一个类？

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

问题描述

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

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

标签： javascriptjqueryhtmlcss

解决方案

我将 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;
}

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

推荐阅读