Testings scroll function activate code

HTML

<div class="container">
    <div class="box box1">
        Div 1 Not Here
    </div>
    
    <div class="box box2">
        Div 2 Not Here
    </div>
    
    <div class="box box3">
        Div 3 Not Here
    </div>
    
    <div class="box box4">
        Div 4 HERE!
    </div>
    
    <div class="box box5">
        Div 3 Not Here
    </div>
</div>

CSS

.container {
    width: 200px;
    height: 200px;
    font-family: Arial, sans-serif;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: auto;
}

.box {
    width: 100%;
    height: 100px;
    line-height: 100px;
    color: black;
    text-align: center;
    border: 1px solid #ccc;
}

.box1 { background: cyan; }
.box2 { background: yellow; }
.box3 { background: orange; }
.box4 { color: white; background: red; }
.box5 { background: purple; }

JavaScript

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

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

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