javascript - 检测 div 何时滚动到不起作用

Question

我无法检测到页面的某个部分何时向下滚动。一旦我确定了某个 ID 或类，我就想运行几个函数。

我找到了this solution here ，并在下面尝试了此操作，但代码未激活:

// Once you scroll into that div ID, this still does not get hit:
$( "#slice_video" ).scroll(function() {
    console.log('in scroll...');    
});


// In the comments I also saw this solution, tried it but still nothing working:

function isScrolledIntoView(elem) {
    // alert("method invoked");
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));
}

if (isScrolledIntoView($('.eco_jumbotron'))){

    // initialize modals:
    modals.wireModals($());

    // Animate in Tiles
    animateTiles();
}

<小时/>

第一个解决方案的 JsFiddle: http://jsfiddle.net/leongaban/6n4bczmu/

第二个解决方案的 JsFiddle http://jsfiddle.net/leongaban/yxkqafwn/

Answer 1

所以你的问题是你首先尝试在错误的div上滚动..然后你正在检查整个窗口到该div的高度..所以如果你将其更改为.container滚动每次滚动时它都会发出警报。你想要做的是检查相对于你正在滚动的 div 的滚动。所以像这样。

function isScrolledIntoView( elem, container )
{
    var contTop = $(container).offset().top;
    var contBottom = contTop + $(container).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= contBottom) && (elemTop >= contTop));
}
$( '.container' ).scroll(function() {
    if ( isScrolledIntoView( $( '.box4' ) , $( '.container' ) ) ) 
    {
        console.log('HERE!');
    }
});

WORKING FIDDLE