Question

我正在尝试使用以下方法制作自定义滚动条：

滚动条高度与内容高度成反比。

scrollHeight ∝ 1 / contentHeight.

scrollHeight = k / contentHeight

因此，如果我们将k的值的常量取为10000.（因为内容容器的高度为100px，100倍100为10000）。它还没有完成这项工作。

无法解决问题。如果单词混淆，请查看此JS Fiddle。我知道这个概念无法弄清楚如何为动态内容设置滚动条的高度。

Answer 1

scrollbarHeight / scrolltrackHeight = visibleHeight / contentHeight

scrollbarHeight = scrolltrackHeight * visibleHeight / contentHeight

例如，您的内容高度为1000px，可见高度为250px。如果您的滚动条高度为240px（所有可见空间 - 从顶部/底部填充5px），则滚动条应为240 * 250 / 1000 = 60

Answer 2

你可以试试这个：

$(document).ready(function(e){
    $('#scroll').draggable({
        axis: 'y',
       containment: 'parent'
    });


    var contentHeight = $('p').height();
    $('.hey').html(contentHeight);

    var containerHeight = $('#scroll-cont').height();

    var k = 10000;

    var scrollerHeight = $('#scroll').height((k / contentHeight) / 2);
    $('.hey').append('<br>' + $('#scroll').height());




    $(document).mousemove(function(e){
        var offsetS = $('#scroll').offset().top * 2;
        $('#scroll-cont').scrollTop(offsetS);
    });
});

应用＆＃39; K方法＃39;在jQuery中制作自定义滚动条

2 个答案: