jquery - 自定义滚动条拇指大小的公式是什么

Question

我正在尝试用 HTML 编写自定义滚动条。
类似的东西

<div class="demo">
    <div class="content">
       My content comes here
    </div>
    <div class="scrollbar">
       <div class="thumb"></div>
    </div>
</div>

我正在尝试使用 jquery 动态设置拇指的高度。

但是，无法计算出拇指大小的公式。
尝试过类似的事情

$.scrollViewHeight = $('.demo').height();
$.contentHeight = $('.content').height();
$.thumbHeight = ($.scrollViewHeight / $.contentHeight) * $.scrollViewHeight;

$('.thumb').height($.thumbHeight);

但它不起作用。
问题1.计算拇指高度的公式是什么？

我还使用 css 将最小拇指大小保持为 50px。
Q2。那么，在这种情况下，我们如何计算拇指的速度，因为内容会更多。

.

Answer 1

当然，编写自定义滚动条还涉及更多内容，但这可以帮助您入门:

var $container = $(".container"),
    $content = $(".content"),
    $scrollbar = $(".scrollbar"),
    $scrollbarHandle = $(".scrollbar-handle");

/* To update scrollbar handle height (only) */

var viewportRatio = $container.height() / $content.height();

if (viewportRatio < 1) {
    $scrollbar.show();

    $scrollbarHandle.height(
        Math.max(
            50,
            Math.floor($scrollbar.height() * viewportRatio)
        )
    );
} else {
    $scrollbar.hide();
}

接下来的步骤是:

1. 内容和滚动条 handle 滚动位置的双向同步:当内容通过其他方式展开、缩小或滚动时重新定位 handle 。设置 handle 拖动时内容的滚动位置。
2. 单击位于 handle 之外的滚动条区域时进行分页。