Кросс-браузерный метод обнаружения scrollTop окна браузера

Ответ 1

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())

Ответ 2

Или просто просто:

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

Ответ 3

Если вы не хотите включать всю библиотеку JavaScript, вы можете часто извлекать нужные вам биты.

Например, это, по сути, как jQuery реализует прокрутку кросс-браузера (Вверху слева):

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, которая составляет undefined. jQuery определяет это, временно добавляя div на страницу и затем измеряя некоторые атрибуты, чтобы определить, правильно ли браузер использует модель окна. Как вы можете себе представить, этот флаг проверяет IE. В частности, он проверяет IE 6 или 7 в режиме quirks. Поскольку обнаружение довольно сложное, я оставил его как упражнение для вас;-), предполагая, что вы уже использовали browser обнаружение в другом месте вашего кода.

Изменить: Если вы уже не догадались, я настоятельно рекомендую вам использовать библиотеку для подобных вещей. Накладные расходы - это небольшая плата за надежный и надежный код, и каждый из них будет намного более продуктивным с использованием кросс-браузера. (В отличие от того, чтобы потратить бесчисленные часы, ударяя головой против IE).

Ответ 4

Я использовал window.scrollY || document.documentElement.scrollTop.

window.scrollY охватывает все браузеры, кроме IE.
document.documentElement.scrollTop охватывает IE.

Ответ 5

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

Ответ 6

Код 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;
}

Unfortunatley, извлекающий значение jQuery.support.boxModel, почти невозможно, потому что вам нужно будет добавить временный дочерний элемент в документ и выполнить те же тесты, что и jQuery.

Ответ 7

Я знаю, что это было довольно давно, поскольку этот поток был обновлен, но это функция, которую я создал, которая позволяет разработчикам находить корневой элемент, который на самом деле имеет рабочее свойство "scrollTop". Протестировано на Chrome 42 и Firefox 37 для 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 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 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

Надеюсь, вы найдете это полезным! Приветствия.

Ответ 8

Это хорошо работает с IE5 до IE11. Он также поддерживает все основные новые браузеры.

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

Ответ 9

Я считаю, что лучший способ получить scrollTop в современных браузерах - это использовать

const scrollTop = document.scrollingElement.scrollTop

если это не работает, вы также можете попробовать

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

Ответ 10

Это прекрасно работает для меня:

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

Ответ 11

чтобы сэкономить вам всю пользу, используйте фреймворк, такой как jquery или mootools который вычисляет все эти значения в одной строке (кросс-браузер) в mootools его $('element'). getTop(); в jquery вам понадобится плагин с размерами, если я правильно помню хотя большую часть времени даже без рамки вы можете использовать element.getScrollTop(); получить то, что вам понадобится единственная проблема заключается в IE7, и ниже этот расчет является несколько ошибочным, поскольку он не учитывает значение позиции элемента например, если у вас есть позиция: абсолютный атрибут css для этого элемента вычисление выполняется над родительским элементом этого элемента