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

Question

Как я могу узнать, какой процент вертикальной полосы прокрутки прошел пользователь в любой данной точке?

Достаточно просто перехватить событие onscroll, чтобы сработать, когда пользователь прокручивает страницу вниз, но как узнать в этом событии, как далеко они прокрутили? В этом случае особенно важен процент. Меня не особо беспокоит решение для IE6.

Предоставляет ли какая-либо из основных платформ (Dojo, jQuery, Prototype, Mootools) простой кросс-браузерно-совместимый способ?

Answer 1

Октябрь 2016: Исправлено. В ответе отсутствовали скобки в демоверсии jsbin. К сожалению.

Chrome, Firefox, IE9 +. Демонстрация в реальном времени на jsbin

var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

Как функция:

function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}

Если вы предпочитаете jQuery (оригинальный ответ):

$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
  
  console.clear();
  console.log(scrollPercent);
})

html{ height:100%; }
body{ height:300%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Мне кажется, я нашел хорошее решение, которое не зависит ни от какой библиотеки:

/**
 * Get current browser viewpane heigtht
 */
function _get_window_height() {
    return window.innerHeight || 
           document.documentElement.clientHeight ||
           document.body.clientHeight || 0;
}

/**
 * Get current absolute window scroll position
 */
function _get_window_Yscroll() {
    return window.pageYOffset || 
           document.body.scrollTop ||
           document.documentElement.scrollTop || 0;
}

/**
 * Get current absolute document height
 */
function _get_doc_height() {
    return Math.max(
        document.body.scrollHeight || 0, 
        document.documentElement.scrollHeight || 0,
        document.body.offsetHeight || 0, 
        document.documentElement.offsetHeight || 0,
        document.body.clientHeight || 0, 
        document.documentElement.clientHeight || 0
    );
}


/**
 * Get current vertical scroll percentage
 */
function _get_scroll_percentage() {
    return (
        (_get_window_Yscroll() + _get_window_height()) / _get_doc_height()
    ) * 100;
}

Answer 3

Это должно сработать, библиотеки не требуются:

function currentScrollPercentage()
{
    return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}

Answer 4

Они отлично сработали для меня в Chrome 19.0, FF12, IE9:

function getElementScrollScale(domElement){
        return domElement.scrollTop / (domElement.scrollHeight - domElement.clientHeight);
    }

function setElementScrollScale(domElement,scale){
        domElement.scrollTop = (domElement.scrollHeight - domElement.clientHeight) * scale;
    }

Answer 5

Этот вопрос был здесь давно, я знаю, но я наткнулся на него, пытаясь решить ту же проблему.Вот как я решил это в jQuery:

Сначала я обернул вещь, которую хотел прокрутить в div (не семантическую, но она помогает).Затем установите переполнение и высоту для оболочки.

<div class="content-wrapper" style="overflow: scroll; height:100px">
    <div class="content">Lot of content that scrolls</div>
</div>

Наконец, я смог рассчитать% прокрутки по следующим показателям:

var $w = $(this),
    scroll_top = $w.scrollTop(),
    total_height = $w.find(".content").height(),        
    viewable_area = $w.height(),
    scroll_percent = Math.floor((scroll_top + viewable_area) / total_height * 100);                

Вот скрипка с рабочим примером:1009 *http://jsfiddle.net/prEGf/

Answer 6

Если вы используете Dojo, вы можете сделать следующее:

var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));

, который будет возвращать значение от 0 до 1.

Answer 7

Сначала прикрепите прослушиватель событий к какому-либо документу, который вы хотите отслеживать

yourDocument.addEventListener("scroll", documentEventListener, false);

Тогда:

function documentEventListener(){
  var currentDocument  = this;
  var docsWindow       = $(currentDocument.defaultView); // This is the window holding the document
  var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
  var scrollTop        = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
  var docHeight        = $(currentDocument).height();    // This is the full document height.

  var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
  var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
  console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}

Answer 8

Я нашел способ исправить предыдущий ответ, чтобы он работал во всех случаях. Протестировано на Chrome, Firefox и Safari.

(((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) || 0) * 100)

Answer 9

var maxScrollTop = messages.get(0).scrollHeight - messages.height();
var scroll = messages.scrollTop() / maxScrollTop; // [0..1]

Answer 10

Использование jQuery

$(window).scrollTop();

даст вам положение прокрутки, после чего вы сможете определить, какой процент зависит от высоты окна.

Существует также стандартное свойство DOM scrollTop, которое вы можете использовать как document.body.scrollTop, однако я не уверен, как это ведет себя в кросс-браузерном режиме; я бы предположил, что при наличии несоответствий их учитывает метод jQuery. 1008 *