自定义滚动条流出屏幕

Question

我正在尝试创建自己的滚动条，到目前为止它工作正常，因为这个小例外。

当我到达页面底部时，条形句柄位于视口下方。

发生了什么的Gif：

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

我正在尝试让句柄栏停在容器的底部，当用户滚动文档底部的所有方向时，但是还没有找到正确执行此操作的方法。

CSS：

po

JS：

.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;
}

我尝试使用插件，但他们没有按预期模拟滚动条（没有鼠标滚轮点击并拖动滚动），所以我决定制作我自己的轻量级版本。关于使用插件的任何建议，虽然都很受欢迎，但会被忽视，不会被接受为答案。

绝对定位：

Answer 1

我认为你忘了考虑滚动条的高度。让我们说滚动条高100像素，你的页面高500像素，你只能将滚动条移动400像素，而不是全部500。

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

还没有对它进行过测试，但有类似的内容;

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

Answer 2

已经找到了解决这个问题的方法，这是一个相当多的试验和错误，但最终设法找到它。希望它对你们中的一些人有用。

将其编辑为更新版本。

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) + '%';
});

Answer 3

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