重新定位窗口上的页面调整大小

Reposition page on window resize

本文关键字：调整 窗口 新定位 定位      更新时间：2024-07-03

我使用scrollTo()进行页面滚动。我发现的一个问题是，当我调整浏览器大小时，页面不会再次滚动到我指定的元素，但它停留在中间的某个位置，所以我必须再次单击"滚动"按钮来对齐页面。当用户调整浏览器大小时，有什么方法可以对齐页面吗。

我试过使用这个：

window.onresize = function() {
    scrollToPosition(section[position]);
}
// position is variable which I declared above this event

但这让滚动变得疯狂，页面开始向右/向左快速移动，这是不正常的。我相信每次调整浏览器大小时，它都会绑定onresize事件。

我的问题有什么解决方案吗

编辑：

这是jsFiddle，但我似乎不知道如何使用jsFiddl，因为这里什么都不起作用：http://jsfiddle.net/52eRj/1/

通过编写以下代码，可以避免每次执行resize事件时重新调整函数。滚动时每1秒执行一次scrollToPosition功能。

var last = new Date().getTime();
var interval = 1000; // Set your own time.
window.addEventListener('resize', function() {
    var curr = new Date().getTime();
    if (curr - last > interval) {
        last = curr;
        scrollToPosition(section[position]);
    }
});

问题可能是您在每次调整大小事件上都调用scrollToPosition函数，在正常的手动调整大小中可以触发100次。

为了避免这种情况，你可以像这样使用clearTimeout：

$(window).resize(function () {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});

function doneResizing() {
    scrollToPosition(section[position]);
}

这样，doneResizing函数只会在窗口停止调整大小500毫秒后调用，从而避免了数十或数百次不必要的调用。

相关文章：