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

但它不起作用。
Q1。获取拇指高度的公式是什么？

我还使用css将min-thumb大小保持为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();
}

接下来的步骤是：

内容和scollbar句柄滚动位置的双向同步：当内容通过其他方式展开，缩小或滚动时重新定位句柄。在拖动句柄时设置内容的滚动位置。
单击滚动条落在手柄外部的区域时的分页。

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

1 个答案: