滚动到视图中时将元素添加到元素（可滚动div） [英] Add class to element when scrolled into view (scrollable div)

问题描述

在滚动时向视图中的元素添加类时是否有解决方案，并在视图之外移除？这需要为可滚动的div工作。到目前为止，我发现了一些解决方案，但它们似乎只适用于body ...不是可滚动的div。

如果您知道一个插件，我很高兴使用插件存在。像这样的东西...

pre $ if（$（'。journal-slider .each-slide img'）。inViewport（） ）{
$（this）.addClass（'in-view'）;
} else {
$（'。journal-slider .each-slide img'）。removeClass（'in-view'）;

$ / code>

谢谢，
R

解决方案

您正在寻找的插件叫做 waypoints

从开始引用：

假设您有div和overflow：scroll，并且你需要一个在这个可滚动元素内的路点。上下文选项可以让你做到这一点。滚动下面的方框。

  $（'＃example-context'）。waypoint（function（）{
 notify（'Hit top of context'）; 
}，{context：'。 example-scroll-div'}）; 
  

编辑：不使用航点

在你已经做过的事情上，我来到了这里：

function checkInView（elem，partial）{var container = $（。scrollable） ; var contHeight = container.height（）; var contTop = container.scrollTop（）; var contBottom = contTop + contHeight; var elemTop = $（elem）.offset（）。top - container.offset（）。top; var elemBottom = elemTop + $（elem）.height（）; var isTotal =（elemTop> = 0&& elemBottom< = contHeight）; var isPart =（（elemTop< 0& elemBottom> 0）||（elemTop> 0&& elemTop< = container.height（）））&&部分;返回isTotal || （）。$（document）.ready（function（）{$（。scrollable）。scroll（function（）{var result =，result2 =; $ .each（$（。scrollable p ），函数（i，e）{if（checkInView（$（e），false））{$（this）.addClass（red）;} else {$（this）.removeClass（red）;}结果+ =+ checkInView（$（e），false）; result2 + =+ checkInView（$（e），true）;}）; $（＃tt）.text（result）; $（ #kk）.text（result2）;}）;}）;

  .scrollable {margin：10px;高度：100像素; overflow-y：scroll;} p {border-width：1px;边框颜色：黑色; border-style：solid;}。red {background-color：red;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> full：< div id =tt>< / div>部分：< div id =kk>< / div>< div class =scrollable> < p为H. ITEM1和LT;跨度>< /跨度>< / p为H. < p为H. ITEM2<跨度>< /跨度>< / p为H. < p为H.项目3<跨度>< /跨度>< / p为H. < p为H. ITEM4<跨度>< /跨度>< / p为H. < p为H. ITEM5<跨度>< /跨度>< / p为H. < p为H. ITEM6<跨度>< /跨度>< / p为H. < p为H. item7<跨度>< /跨度>< / p为H. < p> item8< span>< / span>< / p>< / div>  

b $ b

Is there a solution for adding a class to the element in view when scrolling, and removing when out of view? This needs to work for a scrollable div. I have found a few solutions so far but they only seem to work for body... not a scrollable div.

I am happy to use a plugin if you know one exists. Something like this...

if ($('.journal-slider .each-slide img').inViewport() ) {
    $(this).addClass('in-view');
} else {
   $('.journal-slider .each-slide img').removeClass('in-view');
}

Thanks, R

解决方案

The plugin you are looking for is called waypoints

Quote from the "Get Started" :

"Let's say you have a div with overflow:scroll, and you want a waypoint inside of this scrollable element. The context option lets you do this. Scroll the box below."

$('#example-context').waypoint(function() {
    notify('Hit top of context');
}, { context: '.example-scroll-div' });

EDIT: Not using waypoints

Based on what you already did, I came to this :

function  checkInView(elem,partial)
{
    var container = $(".scrollable");
    var contHeight = container.height();
    var contTop = container.scrollTop();
    var contBottom = contTop + contHeight ;
 
    var elemTop = $(elem).offset().top - container.offset().top;
    var elemBottom = elemTop + $(elem).height();

    var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
    var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.height())) && partial ;

    return  isTotal  || isPart ;
}

$(document).ready(function(){
$(".scrollable").scroll(function(){
    var result="",result2="";
   $.each( $(".scrollable p"),function(i,e){
       if (checkInView($(e),false)) {
           $( this ).addClass( "red" );
       } else {
           $( this ).removeClass( "red" );
       }
        result += " " +  checkInView($(e),false);
       result2 += " " +  checkInView($(e),true);
    });
    $("#tt").text(result);
    $("#kk").text(result2);
});
});

.scrollable{
    margin:10px;
    height:100px;
    overflow-y:scroll;
}
p
{
    border-width:1px;
    border-color:black;
    border-style:solid;
}
.red {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
full:  <div id="tt"></div>
part: <div id="kk"></div>
<div class="scrollable">
    <p>item1<span></span></p>
    <p>item2<span></span></p>
    <p>item3<span></span></p>
    <p>item4<span></span></p>
    <p>item5<span></span></p>
    <p>item6<span></span></p>
    <p>item7<span></span></p>
    <p>item8<span></span></p>
</div>

这篇关于滚动到视图中时将元素添加到元素（可滚动div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！