自动调整自定义水平滚动条/滑块的大小？

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 用户超载？ :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);
};

这意味着您将等到用户“完成”调整浏览器窗口大小后，再调用您的调整大小函数。