JSFiddle - React, Tailwind, and code Playground

by Sushant Ghorpade

HTML

<div class="menu-container">
    <ul class="menu-list">
        <li class="active"> <a href="#">1</a>

        </li>
        <li> <a href="#">2</a>

        </li>
        <li> <a href="#">3</a>

        </li>
        <li> <a href="#">4</a>

        </li>
        <li> <a href="#">5</a>

        </li>
        <li> <a href="#">6</a>

        </li>
        <li> <a href="#">7</a>

        </li>
        <li> <a href="#">8</a>

        </li>
    </ul>
</div>

SCSS

div.menu-container {
    height: 600px;
		width: 200px;
    overflow: hidden;
}

.menu-list {
    white-space: nowrap;
    transition: all ease 750ms;
		
	li {
			display: block;
			background: green;
			a {
				padding: 80px;
				display: block;
				color: white;
				font-weight: bold;
				text-decoration: none;
			}
			&.active {
				background: blue;
			}
	}
}

JavaScript

$(document).ready(function () {
    var scrollTo = 0;
    $('.menu-list').on('click', "a", function () {
        var activeItem = $('li.active');
        var selectedItem = $(this).parent()

        var activeIndex = $('li').index(activeItem);
        var selectedIndex = $('li').index(selectedItem);

        if (selectedIndex > activeIndex) {
            scrollTo -= selectedItem.position().top - activeItem.position().top;
            console.log('Scroll right');
        } else {
            scrollTo += Math.abs(selectedItem.position().top - activeItem.position().top);
            console.log('Scroll left');
            if (scrollTo >= 0) {
                scrollTo = 0;
            }
        }
				
				var totalScroll = scrollTo + 100;

        $('.menu-list').css('transform', 'translateY(' + totalScroll + 'px)');
        activeItem.removeClass('active');
        selectedItem.addClass('active');

    });
});