CODEWITHSUNDEEP
htmljquerycssscrollbarnicescroll
Rejowan Ahmed
Rejowan Ahmed

Reputation: 1

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,
    });
});

Upvotes: 0

Views: 184

Answers (2)

Rejowan Ahmed
Rejowan Ahmed

Reputation: 1

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

Upvotes: 0

Hitik Saini
Hitik Saini

Reputation: 1

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

Upvotes: 0

Related Questions