브라우저 창의 scrollTop을 감지하는 브라우저 간 방법

브라우저 창의 scrollTop을 감지하는 브라우저 간 방법

---

브라우저 창의 scrollTop을 감지하는 가장 좋은 크로스 브라우저 방법은 무엇입니까? 이것은 매우 간단한 스크립트이기 때문에 미리 빌드 된 코드 라이브러리를 사용하지 않는 것을 선호하며 그 모든 것이 필요하지 않습니다.

---

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

alert(getScrollTop())

---

또는 다음과 같이 간단합니다.

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

---

전체 JavaScript 라이브러리를 포함하고 싶지 않은 경우 원하는 비트를 하나에서 추출 할 수 있습니다.

예를 들어, 이것은 본질적으로 jQuery 가 브라우저 간 스크롤 (Top | Left)을 구현 하는 방법입니다 .

function getScroll(method, element) {
  // The passed in `method` value should be 'Top' or 'Left'
  method = 'scroll' + method;
  return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
  ) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);

참고 : 위 코드 browserSupportsBoxModel에 정의되지 않은 변수가 포함되어 있음을 알 수 있습니다 . jQuery는 페이지에 div를 임시로 추가 한 다음 브라우저가 상자 모델을 올바르게 구현하는지 확인하기 위해 일부 속성을 측정하여이를 정의합니다. 상상할 수 있듯이이 플래그는 IE를 확인합니다. 특히 쿼크 모드에서 IE 6 또는 7을 확인 합니다 . 탐지가 다소 복잡하기 때문에 코드의 다른 곳에서 이미 브라우저 기능 탐지를 사용했다고 가정하고 연습용으로 남겨 두었습니다 .

편집 : 아직 추측하지 못했다면 이러한 종류의 라이브러리를 사용하는 것이 좋습니다. 오버 헤드는 견고하고 미래를 보장하는 코드에 지불하는 적은 비용이며 누구나 브라우저 간 프레임 워크를 기반으로 훨씬 더 생산적이 될 것입니다. (IE에 대해 머리를 두드리는 데 셀 수없이 많은 시간을 보내는 것과는 반대로).

---

나는 window.scrollY || document.documentElement.scrollTop.

window.scrollYIE를 제외한 모든 브라우저에 적용됩니다.
document.documentElement.scrollTopIE를 다룹니다.

---

function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");

---

YUI 2.8.1 코드는 다음을 수행합니다.

function getDocumentScrollTop(doc) 
{
   doc = doc || document;

   //doc.body.scrollTop is IE quirkmode only
   return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}

나는 jQuery 1.4.2 코드 (인간을 위해 약간 번역됨)를 생각 하고 올바르게 이해했다고 가정합니다.

function getDocumentScrollTop(doc) 
{
   doc = doc || document;
   win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

   result = 0;
   if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
      result = win.pageYOffset;
   else
      result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
               document.body.scrollTop;

   return result;
}

불행히도 jQuery.support.boxModel문서에 임시 자식 요소를 추가하고 jQuery와 동일한 테스트를 수행해야하기 때문에 의 값을 추출하는 것은 거의 불가능합니다.

---

I know its been quite a while since this thread was updated, but this is a function I created that allows developers to find the root element that actually hosts has a working "scrollTop" property. Tested on Chrome 42 and Firefox 37 for Mac OS X (10.9.5):

function getScrollRoot(){
    var html = document.documentElement, body = document.body,
        cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position
        root;

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1;
    // find root by checking which scrollTop has a value larger than the cache.
    root = (html.scrollTop !== cacheTop) ? html : body;

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value

    return root; // return the scrolling root element
}

// USAGE: when page is ready: create a global variable that calls this function.

var scrollRoot = getScrollRoot();

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window

I hope you find this useful! Cheers.

---

This works well from IE5 to IE11. It also supports all major new browsers.

var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
                (document.body.scrollTop) || (document.scrollingElement);

---

I believe the best way to get scrollTop in modern browsers is to use

const scrollTop = document.scrollingElement.scrollTop

if this doesn't work you could also try

const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)

---

No need extra library, use this snippet:

const scrollTop = 
    (window.pageYOffset !== undefined) ? 
     window.pageYOffset :
    (document.documentElement || document.body.parentNode || document.body).scrollTop;

---

to save you all the trouble use a framework such as jquery or mootools that calculates all these values in one line (cross browser) in mootools its $('element').getTop(); in jquery you will need a plugin named dimensions if i remember correctly although most of the time even without a framework you can actually use element.getScrollTop(); to get what you'll need the only problem is on IE7 and below this calculation is somewhat buggy as it doesn not take the position value of the element into consideration for example if you got a position: absolute css attribute for that element the calculation is performed on the parent element of that element

참고URL : https://stackoverflow.com/questions/871399/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window