2

我正在尝试在 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。得到拇指高度的公式是什么？

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

.

4

1 回答 1

2

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

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. 内容和 scollbar 句柄滚动位置的双向同步：在内容扩展、缩小或以其他方式滚动时重新定位句柄。设置手柄拖动时内容的滚动位置。
  2. 单击位于句柄之外的滚动条区域时的分页。
于 2013-01-24T18:33:33.377 回答