CODEWITHSUNDEEP
javascriptjqueryhtmlcsszurb-foundation
Kibo
Kibo

Reputation: 28

Custom scroll bar flows out of screen

I'm trying to make my own scroll bar, and so far it's working fine, for this small exception.

When I reach the bottom of the page, the bar handle goes under the viewport.

Gif of what's happening:

I know it has to do with the CSS, but I'm unsure on how to set it correctly. Foundation's .off-canvas-content has a class added named .full-height, and the height property is added so that the scroll bar won't be tied to that element. The scroll bar markup is added to div.content, which is where all the remaining content will be.

I'm trying to get the handle bar to stop at the bottom of the container, when the user has scrolled all the way of the bottom of the document, but haven't found a way to do this correctly.

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 tried using plugins for this, but they don't simulate the scroll bar as intended (missing mouse wheel click and drag to scroll), so I decided to make my own, lightweight version of it. Any suggestions about using plugins, albeit appreciated, will be disregarded and not accepted as an answer.

With absolute positioning:

Upvotes: 0

Views: 242

Answers (3)

Michael Falck Wedelgård
Michael Falck Wedelgård

Reputation: 3193

You can get scroll ratio by doing this:

(thumbHeight / containerHeight) + 1

containerHeight is not the scroll area height, but the actual overflow: hidden container.

When you get the scrollTop value just multiply it with your ratio. Like this:

thumbPosition.top = el.scrollTop * ratio + 'px';

Upvotes: 0

Kibo
Kibo

Reputation: 28

Have found a solution regarding this, was quite a bit of trial and error, but managed to find it in the end. Hope it can be of use to some of you.

Edited it to a more revised version.

self.on('scroll', function() {
    elHeight = self.height();
    docHeight = $(document).height();

    var sTop = self[0].scrollTop;
    var sHeight = self[0].scrollHeight;
    var sBHeight = $(scrollBar).height();

    var ratio = (elHeight - $(scrollBar).height()) / elHeight;
    var currentPosY = (sTop / (sHeight - docHeight)) * 100;

    scrollBar.style.top = (currentPosY * ratio) + '%';
});

Upvotes: 0

Nate
Nate

Reputation: 121

I think you forgot to account for the scrollbar's height. Lets say the scrollbar is 100px tall and your page is 500px tall, you are only able to move the scrollbar by 400px, not all 500.

Find out the difference between your scrollbar height and the document height, find the ratio of how they compare, and apply that to your new scrollbar position.

havent tested it, but something like;

var heightToWorkWith = docHeight - scrollBarHeight;
var ratio = heightToWorkWith / docHeight;
function setScrollBarTop (top) {
    scrollBar.style.top = (top * ratio) + 'px';
}

Upvotes: 1

Related Questions