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. コンテンツとスクロールバー ハンドルのスクロール位置の双方向同期: コンテンツが拡大、縮小、または他の方法でスクロールされたときに、ハンドルの位置を変更します。ハンドルドラッグ時のコンテンツのスクロール位置を設定します。
  2. ハンドルの外側にあるスクロールバーの領域がクリックされたときのページネーション。
于 2013-01-24T18:33:33.377 に答える