javascript - 保持滚动位置会导致页面跳转

Question

我正在使用 asp.net 2.0 开发一个网站，我最近添加了几行 javascript 来保存一个 div 的滚动位置 postbacks。

问题是当页面加载时，div 的滚动位置从顶部开始，然后跳转到保存的位置。
如何摆脱这种跳转影响？该网站位于 www.collectedlight.net。

这是我用来保持滚动位置的 javascript:

window.onload = function () {
   //maintain the scroll position for the list of photos across postbacks
   var scrollPos = document.getElementById('ctl00_pagePlaceHolder_photoListScrollPos').value;
   document.getElementById('photoListScrollBar').scrollTop = scrollPos;
}

//save the scroll position of the list of photos
function SaveScrollPos() {
   var scrollPos = document.getElementById('photoListScrollBar').scrollTop;
   document.getElementById('ctl00_pagePlaceHolder_photoListScrollPos').value = scrollPos;
}

滚动位置确实得到了保存，但是当页面加载时，我可以看到滚动位置首先设置到顶部，然后跳转到保存的滚动位置。我希望页面在没有跳转效果的情况下加载到保存的滚动位置。这可能吗？

Answer 1

通过将您的代码附加到 window.onload 事件，您将阻止您的代码运行，直到所有页面资源(包括图像)加载完毕。这就是为什么您只会在其中一张图片需要一段时间才能加载时看到问题。您可能可以通过附加到 DOMContentLoaded 事件来解决您的问题。通过在页面底部附加此事件，您可以确保在加载 DOM 和 CSS 并且页面布局基本准备就绪后执行代码，而无需等待加载每个页面资源。有关更多详细信息，请参见此处:http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/ .