自定义滚动条流出屏幕

Question

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

当我到达页面底部时，条形图柄进入视口下方。

动态图：

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

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

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

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

您可以通过这样做获得滚动比例：

(thumbHeight / containerHeight) + 1

containerHeight不是滚动区高度，而是实际溢出：隐藏容器。

当您获得 scrollTop 值时，只需将它乘以您的比率即可。像这样：

thumbPosition.top = el.scrollTop * 比率 + 'px';

自定义滚动条流出屏幕

Custom scroll bar flows out of screen

html

javascript

css

jquery

zurb-foundation