javascript - 自定义滚动条流出屏幕

Question

我正在尝试制作我自己的滚动条，到目前为止它工作正常，只是因为这个小异常。

当我到达页面底部时，控制条会进入视口(viewport)下方。

正在发生的事情的 Gif:

我知道它与 CSS 有关，但我不确定如何正确设置它。 Foundation 的 .off-canvas-content 添加了一个名为 .full-height 的类，并添加了 height 属性，这样滚动条就不会绑定(bind)到该元素上。滚动条标记被添加到 div.content，这是所有剩余内容的位置。

当用户一直滚动到文档底部时，我试图让 Handlebars 停止在容器底部，但还没有找到正确执行此操作的方法。

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

我尝试为此使用插件，但它们没有按预期模拟滚动条(缺少鼠标滚轮单击和拖动滚动)，所以我决定制作我自己的轻量级版本。关于使用插件的任何建议，尽管受到赞赏，但将被忽视并且不会被接受为答案。

绝对定位:

Answer 1

我想你忘了考虑滚动条的高度。假设滚动条高 100 像素，而您的页面高 500 像素，您只能将滚动条移动 400 像素，而不是全部移动 500 像素。

找出滚动条高度和文档高度之间的差异，找到它们比较的比率，并将其应用到新的滚动条位置。

还没有测试过，但是类似；

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