JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<div class="parent">
  <div class="scrollbar"></div>
  <div class="scrollable">
    <div id="leftSideMenu">
      <ul>
        <li><a href="#">Left Menu 1</a></li>
        <li><a href="#">Left Menu 2</a>
        </li>
        <li><a href="#">Left Menu 3</a>
          <ul class="dropdown-list">
            <li><a href="#">Sub Left Menu 1</a></li>
            <li><a href="#">Sub Left Menu 2</a></li>
            <li><a href="#">Sub Left Menu 3</a></li>
            <li><a href="#">Sub Left Menu 4</a></li>
            <li><a href="#">Sub Left Menu 5</a></li>
            <li><a href="#">Sub Left Menu 6</a></li>
          </ul>
        </li>

        <li><a href="#">Left Menu 4</a></li>
        <li><a href="#">Left Menu 5</a></li>
        <li><a href="#">Left Menu 6</a></li>
        <li><a href="#">Left Menu 7</a></li>
        <li><a href="#">Left Menu 8</a></li>
        <li><a href="#">Left Menu 9</a></li>
        <li><a href="#">Left Menu 10</a></li>
        <li><a href="#">Left Menu 11</a></li>
        <li><a href="#">Left Menu 12</a></li>
        <li><a href="#">Left Menu 13</a></li>
        <li><a href="#">Left Menu 14</a></li>
        <li><a href="#">Left Menu 15</a></li>
        <li><a href="#">Left Menu 8</a></li>
        <li><a href="#">Left Menu 9</a></li>
        <li><a href="#">Left Menu 10</a></li>
        <li><a href="#">Left Menu 11</a></li>
        <li><a href="#">Left Menu 12</a></li>
        <li><a href="#">Left Menu 13</a></li>
        <li><a href="#">Left Menu 14</a></li>
        <li><a href="#">Left Menu 15</a></li>

      </ul>
    </div>
  </div>
</div>
<div style="float:left;">test data</div>

CSS

/*scroll css*/
.parent{
    position:relative;
    overflow:hidden;
    width:230px;
    background:#ddd;
	  float:left;
}
.scrollable{
      overflow-y:scroll;
	    overflow-x:hidden;
      width: 250px;
      height:100%;

}
.scrollbar{

    position:absolute;
    overflow:auto;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:7px;
    border-radius:5px;
	opacity:0.7;
}

/*menu*/
#leftSideMenu { width:250px; }
#leftSideMenu ul { list-style: none; padding:0; margin:0; background-color:#0FACF3; }
#leftSideMenu ul li {  }
#leftSideMenu ul li a {font-family: monospace; padding:15px 5px; display:block; color:#fff; font-size:14px; border-bottom:1px solid #ccc;}
#leftSideMenu ul li .dropdown-list { display:none; left:250px; position:absolute; z-index:10000;}
#leftSideMenu ul li .dropdown-list li a { padding:10px 15px 10px 25px;}

JavaScript

/*scroll*/
  var $scrollable   = $('.scrollable');
  var $scrollbar    = $('.scrollbar');
  var $windowHeight = $(window);
  $scrollable.outerHeight(true);
  var H   = $windowHeight.outerHeight(true);
  var sH  = $scrollable[0].scrollHeight;
  var  sbH = H*H/sH;
  //console.log($(window));
         console.dir(window);
          console.dir(document.documentElement.clientHeight);
         //console.dir($windowHeight);
         console.log($windowHeight.outerHeight(true));
         //console.log(H);
        // console.log($scrollable[0].scrollHeight);

      //   console.log(sH);
     //    console.log(sbH);


$('.scrollbar').height(sbH);

$scrollable.on("scroll", function(){

    $scrollbar.css({top: $scrollable.scrollTop()/H*sbH });
});
/*menu*/
	var parentHeight = $(window).height();
	$(".parent").css({"height":parentHeight})
	$(window).resize(function(){
	var parentHeight = $(window).height();
	$(".parent").css({"height":parentHeight})
	});
	$("#leftSideMenu li[class='dropdown']").on("click", function(){
     $(".dropdown-list",this).toggle();
	})