1

横にスクロールするサイトに取り組んでいます。私は jQuery とプロトタイプについてほとんど知りませんが、このスライダー スクリプトをページ スクロールバーとして機能させました。ウィンドウのサイズを小さくすると、カスタムの水平スライダー/スクロールバーはビューポートの幅にサイズ変更されません。

ここにページと js ファイルがありますhttp://keanetix.co.cc/scrollpage/

ブラウザーのサイズを変更してみると、カスタム スクロールバーが右に伸びていることに気付くでしょう。ページのサイズが変更されたときにページを更新しない限り、カスタム スクロールバーはビューポートに収まりません。

誰かがこれで私を助けることができますか? ありがとう。

これは、HTML ページのコードです。

        <script type="text/javascript" language="javascript">
    // <![CDATA[

        // horizontal slider control
        var slider2 = new Control.Slider('handle', 'track', {
            onSlide: function(v) { scrollHorizontal(v, $('scrollable'), slider2);  },
            onChange: function(v) { scrollHorizontal(v, $('scrollable'), slider2); }
        });



        // scroll the element horizontally based on its width and the slider maximum value
        function scrollHorizontal(value, element, slider) {
            element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
        }

        // disable horizontal scrolling if text doesn't overflow the div
        if ($('scrollable').scrollWidth <= $('scrollable').offsetWidth) {
            slider2.setDisabled();
            $('track').hide();
        }

    // ]]>
    </script>
4

1 に答える 1

1

編集:ページ サイズの再計算が必要なようです。そして、それはプロトタイプのスライダーで行う必要があるようです. 私はそれを自分で使用したことがないので、この場合に何をすべきかを本当に言うことはできません. あなたのためにそれを行うプラグインにメソッドがあるかもしれません...

あなたのページを開くことができませんでした。おそらく SO ユーザーからの過負荷ですか? :p

ただし、ウィンドウのサイズが変更されるたびに、カスタム スクロールバーを保持する要素のサイズを変更する必要があるようです。

window.onresize = resizePage;

次に、resizePage 関数を記述して、新しいサイズを計算し、それに応じて変更します。

補足として、サイズ変更機能を調整して、呼び出しが多すぎないようにすることもできます。

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    }, 50);
}

次に、これを次のように使用します。

window.onresize = function () {
    throttle(resizeFrame);
};

これは、サイズ変更関数を呼び出す前に、ユーザーがブラウザ ウィンドウのサイズ変更を「終了」するまで待機することを意味します。

于 2009-06-15T10:37:00.127 に答える