Автоматическое изменение размера пользовательской горизонтальной полосы прокрутки / слайдера?

Question

Я работаю над сайтом, который прокручивается горизонтально. Я очень мало знаю о 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>

Answer 1

РЕДАКТИРОВАТЬ: Похоже, что требуется пересчет размера страницы. И, похоже, это нужно сделать с помощью слайдера-прототипа. Я сам этим не пользовался, поэтому не могу сказать, что делать в этом случае. В плагине может быть метод, который сделает это за вас ...

---

Я не могу открыть вашу страницу, может быть, перегрузка от пользователей SO? : Р

Но, похоже, вам нужно будет изменить размер элемента, который содержит вашу пользовательскую полосу прокрутки, при изменении размера окна:

window.onresize = resizePage;

Затем напишите свою функцию resizePage, чтобы вычислить новый размер и соответственно изменить.

В качестве примечания вы можете ограничить свою функцию изменения размера, чтобы не вызывать слишком много вызовов.

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

Затем используйте это следующим образом:

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

Это означает, что вы будете ждать, пока пользователь "закончит" изменение размера окна браузера, прежде чем вызывать функцию изменения размера.