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);
};

这意味着在调用调整大小功能之前，您将等到用户“完成”调整浏览器窗口的大小。

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

1 个答案: