1

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

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

这是小提琴先生。调整窗口大小，您会发现问题所在。谢谢！

4

5 回答 5

1

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

 $('html, body').scrollTo($('div#right'), 800);
于 2012-07-26T20:38:13.473 回答
1

正如您在关于卢克的回答的评论之一中提到的那样，我重新评估了这一点，您需要记住您最后的位置。

您需要跟踪您所在的位置，然后在重新调整大小后返回那里。
使用与此类似的代码： 

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

更新了演示

于 2012-07-26T20:41:03.510 回答
1

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

这可能比弗朗索瓦的回答稍微慢一点，因为您不必重新计算宽度，因为几乎每个像素都会调用此代码，窗口大小会更改为。

于 2012-07-26T20:46:03.980 回答
1

添加这个：

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

$(window).resize( function () {
    window.scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
​
于 2012-07-27T01:28:45.600 回答
0

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

于 2012-07-26T20:41:18.567 回答