I have a dashboard with a left-side bar. The bar has a lot of elements in it (including inner lists, etc). Obviously, it didn't fit in such a small area. The solution was to use a slim scroll by JQuery. The problem I have encountered, though, is unavailability to scroll to the very last element inside the bar.
The bar looks like this (without scrolling)
Now take a look at how it looks when inner elements are open:
See? The very last element cannot be seen properly (although it is clickable). Unfortunately, the only way to "fix" it is perphaps use some parameters, while initializing this stuff. Now it looks like this:
$('.elemToAddScrolling').slimScroll({
height: '100%',
wheelStep: 5,
});
Basically I see that the library generates div elements - one of them is slimScrollBar
- exactly what I look for. I see that it has top
property, and whenever I scroll it alters. The maximum value, though, is 107px
(when we reach "the end"). I use the latest version of this plugin - 1.3.8 Is there a way to customize it really?
The issue was reproduced here.
So it was clear that it was a padding issue from a parent element. Now which one? In the codepen, it was the body... In J. Doe's project, it was on an outer wrapper were he found a 44px padding.
The issue was fixed by applying a margin-top:-44px
to the inner container... To move the whole thing up.
But, another way could have been to apply height: calc(100% - 44px)
in the slimScroll settings! It can take it, as you can see it here.