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 回答