Получить процент прокрутки элемента с jquery

Я пытаюсь получить div для анимации 0% - 100% относительно процента прокрутки элемента.

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

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

Если я могу выяснить, как вернуть процент прокрутки conheight, тогда это должно быть легко.

$(window).scroll(function() {

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

    $('.bar-long').css('width', scrollPercent +"%"  );

});

Здесь jsfiddle, http://jsfiddle.net/SnJXQ/

Это анимирующий барабан, основанный на проценте прокрутки элемента body.

Анимирует от 0% до 100% (ну, на самом деле это не так, но я не могу понять, почему).

То, что я хотел бы сделать, это получить процент прокрутки в .post div, а затем оживить его по отношению к этому. то есть. Прокрутка 10% от .post,.bar-long составляет 10% ширины, прокручивается 70%.post,.bar-long - 70%.

Ответы

Ответ 1

Демо

Ваша проблема такая же, как Как получить процент прокрутки по горизонтали от HTML-элемента в JavaScript?, но вертикально.

Затем, чтобы получить процент прокрутки по вертикали, используйте

/*  JS  */ var scrollPercentage = 100 * containeR.scrollTop / (containeR.scrollHeight-containeR.clientHeight); 
/*jQuery*/ var scrollPercent = 100 * $(containeR).scrollTop() / ($(containeD).height() - $(containeR).height());

В вашем случае containeR = window; containeD = document:

var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

Ответ 2

Хорошо, я вижу, чего вы пытаетесь достичь... на самом деле я просто сделал что-то очень похожее. Большинство решений, которые я обнаружил там, также были доступны только для полностраничных примеров с свойствами окна или документа. Вместо этого я нуждался в этом в конкретном div, который в моем случае фактически использовался для обновления горизонтальной позиции другого div.

Сначала вам нужно, чтобы событие прокрутки привязалось к вашему $('. post')

Затем высота $('. content') будет равна вашей фактической высоте прокрутки

Наконец, примените свою процентную формулу: (Y/(scrollHeight - postHeight)) * 100 = scrollPercent

Поэтому вместо использования атрибутов документа или окна ваш код должен быть следующим:

$('.post').scroll(function() {
  var currY = $(this).scrollTop();
  var postHeight = $(this).height();
  var scrollHeight = $('.content').height();
  var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
});

Здесь вы можете найти скрипку: JS Fiddle Для прокрутки Div Scroll

Текущий проект, в котором я его реализовал, находится здесь: Вертикальная прокрутка дисков Горизонтальная позиция

Надеюсь, это решит вашу проблему:)

Ответ 3

Предположим, вы хотите отслеживать прокрутку некоторого документа, найденного в некоторых IFrame на вашей странице.

object.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+"%");
}