0

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,
    });
});
Rejowan Ahmed
  • 1
  • 2

2 Answers2

0

Rejowan Ahmed The main problem is with your design, don't keep the scroll in the sidebar the design itself is not intuitive also you can refer to jquery plugins which resolves you issues check out bootstrap JS Dropdown feature in navs and then try to change your sidebar

Hitik Saini
  • 1
  • 1
  • 1
  • I have tried all the ways. It doesn't work. So I have stated the old codes here. I did keep the menus in another div and made it fixed, added the scrollbar to it. But it didn't work. Can you suggest me any other plugins? – Rejowan Ahmed Jun 15 '20 at 19:02
0

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

Rejowan Ahmed
  • 1
  • 2