JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="zoom">

    </div>
    <div class="menu-container">
        <div class="menu-item current" style="background-color: #FCC;">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item" style="background-color: #FCC;">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item" style="background-color: #FCC;">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item" style="background-color: #FCC;">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div class="menu-item">
            <img src="http://easycaptures.com/fs/uploaded/680/1881883612.jpg">
        </div>
        <div style="background-color: #FEE; border: 1px solid #00F; height:678px; padding: 20px;">
            <h2 style="color:#F00;">THIS DIV IS ADDED TO BE ABLE TO SCROLL TO LAST MENU ITEM</h2>
            <h3>Its height is equal to [menu container height] - 1 [menu item height] = 960 - 240 = 720px</h3>
            <h3>If remove this DIV, you won't be able to scroll to last 3 menu items</h3>
        </div>
    </div>
</div>

CSS

.menu-container {
    height: 960px;
    overflow: hidden;
}
.menu-item {
    height: 240px;
}
.wrapper {
    position: relative;
}
.zoom {
    border: 1px solid #F00;
    height: 238px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.menu-item img {
    display: block;
    height: 187px;
    width: 462px;

    -webkit-transition: height 0.3s, width 0.3s;
    -moz-transition: height 0.3s, width 0.3s;
    -o-transition: height 0.3s, width 0.3s;
    -ms-transition: height 0.3s, width 0.3s;
    transition: height 0.3s, width 0.3s;
}
.menu-item.current img {
    height: 240px;
    width: 593px;
}

JavaScript

jQuery(document).ready(function($){

    var current = 0;
    var menu = $('.menu-container').scrollTop(0);
    var items = menu.find('.menu-item');
    var zoom = $('.zoom');


    function isVerticalScroll(event){
        var e = event.originalEvent;
        if (e.axis && e.axis === e.HORIZONTAL_AXIS)
            return false;
        if (e.wheelDeltaX)
            return false;
        return true;
    }

    function handleMouseScroll(event){
        if(isVerticalScroll(event)){
            var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail;
            current += (delta > 0 ? 1 : -1);

            if(current < 0)
                current = 0;
            if(current >= items.length){
                current = items.length - 1;
            }

            menu.stop().animate({
                "scrollTop": current * 240
            }, 300);

            items.removeClass('current').eq(current).addClass('current');

            event && event.preventDefault();
            return false;
        }
    }

    zoom.on({
        "MozMousePixelScroll": handleMouseScroll,
        "mousewheel": handleMouseScroll
    });
});