Javascript로 스크롤 막대 위치를 얻는 방법은 무엇입니까?

JavaScript를 사용하여 브라우저의 스크롤 막대 위치를 감지하여 페이지에서 현재 뷰의 위치를 ​​결정하려고합니다. 내 생각에 트랙의 엄지 손가락이 어디에 있는지 감지 한 다음 엄지 손가락의 높이를 트랙의 총 높이에 대한 백분율로 감지해야합니다. 과도하게 복잡합니까, 아니면 JavaScript가 그보다 쉬운 솔루션을 제공합니까? 어떤 코드 아이디어가 있습니까?

및를 사용 element.scrollTop하여 element.scrollLeft스크롤 된 수직 및 수평 오프셋을 각각 얻을 수 있습니다 . 전체 페이지에 관심 element이 document.body있다면 당신은 그것을 비교할 수 element.offsetHeight와 element.offsetWidth(다시, element당신이 비율을 필요로하는 경우 몸이 될 수 있음).

<div>Chrome 에서이 작업을 수행했습니다 .

element .scrollTop- 스크롤로 인해 맨 위에 숨겨진 픽셀입니다. 스크롤이 없으면 값은 0입니다.

element .scrollHeight- 전체 div의 픽셀입니다.

element .clientHeight- 브라우저에 표시되는 픽셀입니다.

var a = element.scrollTop;

위치가 될 것입니다.

var b = element.scrollHeight - element.clientHeight;

scrollTop 의 최대 값이됩니다 .

var c = a / b;

[0에서 1까지] 스크롤의 백분율이 됩니다.

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

정수가 2 개인 배열을 반환합니다.-[scrollLeft, scrollTop]

그것은 다음과 같습니다 :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

2018 년 답변 :

이와 같은 작업을 수행하는 가장 좋은 방법은 Intersection Observer API 를 사용하는 것 입니다.

교차 관찰자 API는 대상 요소와 상위 요소 또는 최상위 문서의 뷰포트와의 교차로에서 변경 사항을 비동기 적으로 관찰하는 방법을 제공합니다.

역사적으로, 요소의 가시성 또는 서로에 대한 두 요소의 상대적인 가시성을 감지하는 것은 솔루션을 신뢰할 수없고 브라우저와 사용자가 액세스하는 사이트가 느려지는 경향이있는 어려운 작업이었습니다. 불행히도, 웹이 발전함에 따라 이러한 종류의 정보에 대한 필요성이 커졌습니다. 교차로 정보는 다음과 같은 여러 가지 이유로 필요합니다.

• 페이지로 이미지 또는 기타 컨텐츠의 지연 로딩이 스크롤됩니다.
• 스크롤 할 때 점점 더 많은 컨텐츠가로드되고 렌더링되는 "무한 스크롤"웹 사이트를 구현하므로 사용자가 페이지를 넘길 필요가 없습니다.
• 광고 수익을 계산하기위한 광고 가시성보고.
• 사용자가 결과를 볼지 여부에 따라 작업 또는 애니메이션 프로세스를 수행할지 여부를 결정합니다.

과거에 교차 감지를 구현하면 영향을받는 모든 요소에 필요한 정보를 빌드하기 위해 Element.getBoundingClientRect ()와 같은 메소드를 호출하는 이벤트 핸들러 및 루프가 포함되었습니다. 이 코드는 모두 메인 스레드에서 실행되므로이 ​​중 하나라도 성능 문제를 일으킬 수 있습니다. 이러한 테스트를 통해 사이트를로드하면 상황이 너무 나빠질 수 있습니다.

다음 코드 예제를 참조하십시오.

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

대부분의 최신 브라우저 는 IntersectionObserver를 지원 하지만 이전 버전과의 호환성을 위해 polyfill 을 사용해야합니다 .

전체 페이지를 관리하는 경우 이것을 사용할 수 있습니다 :

document.body.getBoundingClientRect().top

jQuery를 사용하는 경우 완벽한 기능이 있습니다. .scrollTop ()

doc here-> http://api.jquery.com/scrollTop/

참고 :이 기능을 사용하여 위치를 검색하거나 위치를 설정할 수 있습니다.

참조 : http://api.jquery.com/?s=scroll

스크롤 위치를 얻는 다른 방법은 다음과 같습니다.

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

다음 함수가 스크롤 좌표 값을 갖는 데 도움이 될 수 있다고 생각합니다.

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

나는 이 대답 에서 약간의 변화 로이 아이디어를 얻었습니다 .