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

Question

Каков наилучший кросс-браузерный способ для определения scrollTop окна браузера? Я предпочитаю не использовать предварительно созданные библиотеки кода, потому что это очень простой скрипт, и мне не нужен весь этот дедвейт.

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

Answer 2

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 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'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

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

Answer 8

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

const scrollTop = document.scrollingElement.scrollTop

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

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

Answer 9

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

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

Answer 10

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