htmljquerycssscrollbarnicescroll

Scrolling issue with drop-downs(Custom Scrollbar Plugin)


I am Rejowan Ahmed. In one of my project I am using nicescroll as the default scrollbar plugin. Now I have faced a greater issue. I have sidebar with several drop-down menus. And the sidebar is fixed. I am using nicescroll there. But when I open bottom dropdowns the scrollbar can't detect the height. So, it hides the contents below it. How to fix it? Or is there any other good plugin which has no such problems? Help me please! Here is the code

The HTML

<div class="sidebar scrollbar shadow-lg">
  <div> Content Here With Dropdowns </div>
</div>
            

CSS

.sidebar{
  position: fixed;
  overflow: auto;
  height: 100%;
  bottom: 0;
  left: 0;
  min-width: 240px;
  margin: 0;
  font-size: 18px;
  padding-bottom: 50px;
}

JS

$(document).ready(function() {
    $(".scrollbar").niceScroll({
        cursorcolor: "rgba(44, 187, 244, 0.2)",
        autohidemode: "cursor",
        cursorwidth: "8px",
        cursorborder: "none",
        cursorborderradius: "2px",
        background: "rgba(10, 161, 219, 0.1) none repeat scroll 0% 0%",
        cursorminheight: 20,
    });
});


Solution

  • Finally I have got the solution. A same question was asked here before and it worked for me. See the question below.

    Jquery Nice scroll not working