JSFiddle - React, Tailwind, and code Playground

by Yogesh Salgar

HTML

<script src="http://enscrollplugin.com/releases/enscroll-0.6.0.min.js"></script>
<div class="page-sidebar scrollbox">
            <!-- Sidebar Menus List -->
            <ul data-slide-speed="500" data-auto-scroll="true" class="page-sidebar-menu" style="outline: medium none; overflow: hidden;" tabindex="0">
                <!-- start "General page Settings" -->
                <li class="start">
                    <a onclick="open_page_settings();" href="javascript:;">
                        <i class="fa fa-cogs"></i>
                        <span class="title">Page Settings</span>
                    </a>
                </li>           
                <!-- end "General Settings" -->

                <!-- start "Email Settings" -->
                <li>
                    <a href="#">
                        <i class="fa fa-envelope"></i>
                        <span class="title">Email Settings</span>
                    </a>
                </li>
                <!-- end "Email Settings" -->

                <!-- start "Advanced Styles" -->
                <li>
                    <a href="#">
                        <i class="fa fa-crosshairs"></i>
                        <span class="title">Advanced Settings</span>
                    </a>
                </li>
                <!-- end "Advanced Styles" -->

                <!-- start "Page Styles" -->
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-font"></i>
                        <span class="title">Page Styles</span>
                        <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="/admin/landingpages">Set Main Font</a></li>
                        <li><a href="/admin/landingpages">Global Colors</a></li>
                    </ul>
                </li>
                <!-- end "Page Styles" -->

                <!-- start "All Elements" -->
              ...

CSS

.page-sidebar, .page-sidebar-menu{
    height:300px;
}

JavaScript

$(function() {
	 $('.page-sidebar').enscroll({
		pollChanges: 	true,
		showOnHover:true,
		propagateWheelEvent: false,
		addPaddingToPane: false,
		propagateWheelEvent: false,
	 });
})