Question

我正在使用jQuery和scrollTo插件开发我的第一个单页水平网站。该网站有3个屏幕并开始居中（显示中间屏幕）。要做到这一点，我的逻辑方法是让<body>拥有width:300%;，每个屏幕都有width:33.3333%;。当您单击<a>时，jQuery会将您转到另一个屏幕，向左或向右移动。

这很好用，但是当我尝试调整窗口大小时，我失去了所有结构，宽度停止有意义。我想知道我能做些什么来解决这个问题，但更重要的是我想了解为什么会这样。

这是Mr. Fiddle。调整窗口大小，你会看到什么是错的。谢谢！

Answer 1

如果你正在使用scrollTo插件，为什么不在指定滚动位置时使用“一个DOM元素（逻辑上，可滚动元素的子元素）”？那就是：

 $('html, body').scrollTo($('div#right'), 800);

Answer 2

我重新评估了这一点，正如你在其中一篇关于路加答案的评论中提到的那样，你需要记住你最后的位置。

您需要追踪自己的位置，然后在重新调整尺寸后再回到那里使用与此类似的代码：

var lastPosition = "middle";
var $body = $('html, body');

window.scrollTo(($(document).width() - $(window).width()) / 2, 0);

$('#go_left').click(function() {
    $body.scrollTo('0px', 800);
    lastPosition = "left";
});
$('#go_right').click(function() {
    $body.scrollTo('100%', 800);
    lastPosition = "right";
});
$('#left_link').click(function() {
    $body.scrollTo('50%', 800);
    lastPosition = "middle";
});
$('#right_link').click(function() {
    $('html, body').scrollTo('50%', 800);
    lastPosition = "middle";
});

$(window).off('resize.menu').on('resize.menu', function() {    
    switch(lastPosition)
    {
        case "left":
            $body.scrollTo('0px', 0);
            break;
        case "middle":
            $body.scrollTo('50%', 0);
            break;
        case "right":
            $body.scrollTo('100%', 0);
            break;
    }
})

请参阅DEMO

我还缓存了body元素，因此在滚动时不必不断地重新遍历它，但这会增加很少的性能。

和以前一样，记得在离开页面时取消绑定事件，否则可能会导致内存泄漏。

我仍然没有设法摆脱滞后的重新定位，但这是可以解决的问题。

修改
最后找到了一种方法来最小化调整大小时的滞后/闪烁。

在调整大小方法中使用scrollLeft()它更好，不完美/完美但更好：

$(window).off('resize.menu').on('resize.menu', function() { var elementToScrollTo = "div#main"; switch(lastPosition) { case "left": elementToScrollTo = "div#left"; break; case "middle": elementToScrollTo = "div#main"; break; case "right": elementToScrollTo = "div#right"; break; } $(window).scrollLeft($(elementToScrollTo).position().left); })

更新了DEMO

Answer 3

$(window).resize(function() { $('html, body').scrollTo('50%', 0); });

这可能比Francois的回答稍微不那么迟，因为您不必重新计算宽度，因为几乎每个像素都会调用此代码。

Answer 4

添加：

http://jsfiddle.net/EAzS9/1/

$(window).resize( function () {
    window.scrollTo(($(document).width() - $(window).width()) / 2, 0);
});

Answer 5

当您使用scrollTo时，即使您键入了百分比值，也会将其设置为绝对像素值。调整窗口大小不会改变该绝对像素值，除非您在“resize”事件上的事件处理程序中编码以重新计算滚动值。但是，如果我是你，我会使用像这样的绝对像素值。定义每个.page div的宽度（以像素为单位），并将它们全部包装在宽度非常大的div中，以确保将来的页面适合。然后，而不是滚动，设置包装器的left偏移量。最初的coda slider使用了这种技术，我想现在的那种技术仍然存在。

一页水平站点不以调整大小为中心

5 个答案: