我正在使用jQuery和scrollTo插件开发我的第一个单页水平网站。该网站有3个屏幕，开始居中（显示中间屏幕）。为了实现这一点，我的逻辑方法是使<body>具有width:300%;，每个屏幕具有width:33.3333%;。当您单击<a>时，jQuery会向左或向右将您发送到另一个屏幕。
这很好，但是当我试图调整窗口的大小时，我会失去所有的结构，宽度就没有意义了。我想知道我能做些什么来解决这个问题，但更重要的是，我想了解为什么会发生这种情况。
这是菲德尔先生。调整窗口大小，您就会发现问题所在。谢谢
我重新评估了这一点，正如你在对卢克答案的一条评论中提到的那样，你需要记住你最后一次去了哪里。
你需要跟踪你在哪里，然后在重新调整尺寸后返回那里
使用类似的代码：
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;
}
})
参见演示
我还缓存了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);
})
更新的演示
如果您使用的是scrollTo插件，为什么不在指定滚动位置时使用"DOM元素（逻辑上是可滚动元素的子元素）"？即：
$('html, body').scrollTo($('div#right'), 800);
$(window).resize(function() {
$('html, body').scrollTo('50%', 0);
});
这可能比Francois的答案稍微不那么滞后，因为你不必重新计算宽度，因为几乎每个窗口大小变化的像素都会调用此代码。
添加此项：
http://jsfiddle.net/EAzS9/1/
$(window).resize( function () {
window.scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
当您使用scrollTo时，即使您在中键入了一个百分比值，也会被设置为绝对像素值。调整窗口大小不会改变绝对像素值，除非您在"调整大小"事件的事件处理程序中编码以重新计算滚动值。如果我是你的话，我会用绝对像素值来处理这样的事情。以像素为单位定义每个.pagediv的宽度，并将它们全部封装在一个宽度非常大的div中，以确保将来的页面能够容纳。然后，设置包装器的left偏移量，而不是滚动。最初的尾段滑块使用了这种技术，我想现在的仍然使用。