Как сделать скроллинг с помощью mousewheel, чтобы блоки не уезжали за пределы страницы?

Question

Blah Blag @dsadasdad

lol

JavaScript

Как сделать скроллинг с помощью mousewheel, чтобы блоки не уезжали за пределы страницы?

Ситуация такая есть блоки внутри cases-wr и я их пытаюсь скроллить с помощью Mousewheel плагина. Однако иногда блоки уезжают за пределы страницы вниз и за пределы страницы вверх.

<div class="cases-wr">
        <div class="case case-left">
            <div class="case-overlay"></div>
            <div class="bg-img" style="background: url('../temp/1.jpg') top left / cover;"></div>
            <div class="desc">
                <i class="case-more-info">{{ HTML::image("../img/case-more.png", "", array("width" => "58px", "height" => "58px"))  }}</i>
                <h3>Appia, Baldoser<br>Испания</h3>
                <span>Офомрление террасы</span>
            </div>
        </div>
        <div class="case case-right">
            <div class="case-overlay"></div>
            <div class="bg-img" style="background: url('../temp/2.jpg') top left / cover;"></div>
            <div class="desc">
                <i class="case-more-info">{{ HTML::image("../img/case-more.png", "", array("width" => "58px", "height" => "58px"))  }}</i>
                <h3>Acurelia, Benadresa<br>Испания</h3>
                <span>Гостинная</span>
            </div>
        </div>
        <div class="case case-left">
            <div class="case-overlay"></div>
            <div class="bg-img" style="background: url('../temp/1.jpg') top left / cover;"></div>
            <div class="desc">
                <i class="case-more-info">{{ HTML::image("../img/case-more.png", "", array("width" => "58px", "height" => "58px"))  }}</i>
                <h3>Appia, Baldoser<br>Испания</h3>
                <span>Офомрление террасы</span>
            </div>
        </div>
        <div class="case case-right">
            <div class="case-overlay"></div>
            <div class="bg-img" style="background: url('../temp/2.jpg') top left / cover;"></div>
            <div class="desc">
                <i class="case-more-info">{{ HTML::image("../img/case-more.png", "", array("width" => "58px", "height" => "58px"))  }}</i>
                <h3>Acurelia, Benadresa<br>Испания</h3>
                <span>Гостинная</span>
            </div>
        </div>
    </div>

$('body').on('mousewheel', function(event) {
                var CL = $(".case-left"), CR = $(".case-right"), CLHeight = CL.height(), CR = CR.height();
                if(event.deltaY == -1) {
                    CL.animate({"bottom": CLHeight}, 200);
                } else {
                    CL.animate({"top": CLHeight}, 200);
                }
            });