2013-01-14 7 views
2

asp.net 2.0을 사용하여 웹 사이트를 개발 중이며 javascript의 몇 줄을 추가하여 의 scroll position을 저장합니다.

문제는 페이지가 div의 스크롤 위치를로드 할 때 상단에서 시작하여 저장된 위치로 이동한다는 것입니다.
어떻게이 점프 효과를 없앨 수 있습니까? 이 웹 사이트는 www.collectedlight.net에 있습니다. 여기 스크롤 위치를 유지하면 페이지가 점프합니다.

내가 스크롤 위치를 유지하기 위해 사용하고 자바 스크립트입니다 :

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

스크롤 위치가 저장됩니까하지만 페이지로드이기 때문에 내가 먼저 상단으로 설정 스크롤 위치를 참조하고 이동할 수 있습니다 저장된 스크롤 위치로 내려갑니다. 점프 효과없이 페이지를 저장된 스크롤 위치에로드하려고합니다. 이것이 가능한가?

+0

포스트 백 후에도 js 변수를 유지할 수 없습니다. 몇 가지 해결책이 있습니다. js 변수를 쿠키로 유지하거나 아약스 업데이트 패널을 사용해보십시오. – Ricky

+0

자바 스크립트 몇 줄을 게시하면 어떤 일이 일어나는지 더 잘 이해할 수 있습니다. – Snixtor

+0

Chrome 또는 IE9에서 설명하는 동작을 복제 할 수 없습니다. 당신이 묘사하는대로 행동하지 않거나 너무 빨리 일어나서 내가 눈치 채지 못합니다. 이 시점에서 실행 속도가 중요한 요인 일 수 있습니까? 그 전에 다른 스크립트를 실행합니까? "onload"이벤트를 지연시킬 수있는 요소는 무엇입니까? – Snixtor

답변

0

코드를 window.onload 이벤트에 첨부하면 모든 이미지 애셋 (이미지 포함)이로드 될 때까지 코드가 실행되지 않습니다. 따라서 사진 중 하나에로드하는 데 시간이 오래 걸리는 경우에만 문제가 표시됩니다. 대신 DOMContentLoaded 이벤트에 연결하여 문제를 해결할 수 있습니다. 페이지 하단의이 이벤트에 첨부하면 모든 단일 페이지 에셋이로드 될 때까지 기다리지 않고도 DOM과 CSS가로드되고 페이지 레이아웃이 기본적으로 준비되면 코드가 실행되도록 할 수 있습니다. 자세한 내용은 여기를 참조하십시오 : http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/.

관련 문제