jQuery 페이지의 스크롤 위치 scrollTop 및 scrollLeft_jquery에 대한 간략한 설명

웹 페이지는 페이지를 표시하는 브라우저 창보다 큰 경우가 많습니다. 웹 문서에는 콘텐츠가 많기 때문에 페이지가 브라우저보다 더 커지고 때로는 넓어져서 방문자가 전체를 스크롤해야 하는 경우도 있습니다. 페이지(그림 10-8 참조). 방문자가 스크롤하면 문서의 일부가 보기에서 사라집니다. 예를 들어, 웹 페이지가 브라우저 창에 완전히 들어가지 않고 문서가 왼쪽이나 위로 스크롤되어 페이지의 상단과 왼쪽이 보기에서 사라집니다. 이는 브라우저 창의 왼쪽 상단 모서리와 문서의 왼쪽 상단 모서리가 동일하지 않음을 의미합니다. 예를 들어 화면 상단에 동적 배너와 같은 새 요소를 배치하려는 경우 요소의 왼쪽 및 상단 위치를 0으로 설정하려고 하면 문제가 발생합니다. 실제로는 단순히 배치하는 것뿐입니다. 문서 상단에 있지만 브라우저 창 외부에 있습니다.

다행스럽게도 jQuery는 페이지의 위쪽과 왼쪽에서 스크롤되는 정도(즉, 브라우저 창 위쪽과 왼쪽에 문서의 픽셀 수)를 확인할 수 있는 두 가지 기능을 제공합니다. 브라우저 창 위에 문서가 얼마나 있는지 확인하려면 다음 코드 줄을 사용하세요.

코드 복사 코드는 다음과 같습니다.

$(문서).scrollTop()

화면 왼쪽에 문서가 얼마나 있는지 확인하려면 다음 코드 줄을 사용하세요.

코드 복사 코드는 다음과 같습니다.

$(문서).scrollLeft()

두 함수 모두 페이지에서 다른 요소를 배치하는 데 사용할 수 있는 픽셀 값을 반환합니다. 예를 들어, 누군가 아래로 스크롤한 후에도 페이지 중앙에 팝업을 배치하려면 방문자가 얼마나 스크롤했는지 확인하고 많은 추가 요소가 페이지 하단에 오도록 팝업을 이동해야 합니다. 팝업되는 도구 설명의 예에서는 방문자가 페이지를 아래로 스크롤할 때 도구 설명을 찾을 때 주의해야 합니다. 실수로 도구 설명을 페이지 공간에 배치하기 쉽지만 브라우저 보기 외부에 배치됩니다. 입의 영역. 브라우저 창 상단의 표시 영역 위에 도구 설명이 배치되지 않도록 하려면 scrollTop()을 사용하세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.