I have been working on creating my own scroll bar, and for the most part, it's functioning well. However, there is one small issue that I'm facing.
Whenever I reach the bottom of the page, the handle of the scroll bar disappears underneath the viewport.
Here is a GIF showing the problem:
I understand that this issue is related to CSS, but I am unsure about how to adjust it properly. The .full-height class in Foundation's .off-canvas-content adds a height property to prevent the scroll bar from being fixed to that element. The scroll bar markup is inserted into div.content, where all the remaining content resides.
I am aiming to ensure that the handle bar stops at the bottom of the container when the user has scrolled to the very end of the document, but I haven't found the correct method to achieve this yet.
CSS:
.scroll-container {
position: fixed;
right: 50px;
top: 0;
height: 100%;
width: 7.5px;
background-color: rgba(55,55,55,.3);
}
.scroll-bar {
position: relative;
top: 0;
height: 20%;
width: 100%;
background-color: #6A1B9A;
}
.full-height {
height: 100vh;
min-height: 100vh;
}
.content {
float: left;
width: 100%;
height: 100%;
display: block;
padding: 10px 20px;
overflow-y: scroll;
}
JS:
(function($) {
$.fn.scroller = function() {
var self = this,
scrollBarDrag = false,
docHeight = $(document).height();
var scrollContainer = document.createElement('div'),
scrollBar = document.createElement('div');
scrollContainer.className = 'scroll-container';
scrollBar.className = 'scroll-bar';
scrollContainer.appendChild(scrollBar);
self[0].appendChild(scrollContainer);
self.on('scroll', function() {
var top = $(this).scrollTop();
setScrollBarTop(top);
});
function setScrollBarTop (top) {
scrollBar.style.top = top + 'px';
}
};
})(jQuery);
I have experimented with various plugins for this issue, but they do not provide the exact functionality I need (such as missing mouse wheel click and drag to scroll), so I decided to create my own lightweight version. While suggestions about using plugins are welcome, I am currently focusing on finding a solution independently.
With absolute positioning: