Changement de la Barre de Progression de la Valeur fondée sur le Défilement

Je voudrais être en mesure de faire de ma barre de progression de l'augmentation, basé sur la façon dont beaucoup j'ai défile et combien il en reste.

J'ai essayé ceci: jsFiddle et il ne semble pas fonctionner, j'ai basé mon script de quelqu'un script qui fait un bloc de déplacer horizontalement en fonction de défilement %.

Mon code:

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
.
.
.
.

JS:

$(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            scrollPercent = (s / d);
        var position = (scrollPercent);
        $("#progressbar").progressbar('value', position);
    });
});

cochez cette réponse - stackoverflow.com/questions/19614069/... je suppose que c'est ce que vous cherchez

OriginalL'auteur hakarune | 2013-10-31

18

De travail DÉMO

Essayer cette
```
$(window).scroll(function () {
  var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
        scrollPercent = (s / (d-c)) * 100;
        var position = scrollPercent;

   $("#progressbar").attr('value', position);

});
```
Espère que cette aide, je vous Remercie

Cela fonctionne exactement de la manière dont j'ai besoin! Merci! ^_^ Des jours heureux.
vous êtes les bienvenus
C'est étonnant, il est doux!
C'est vraiment génial. +1
Cela ne fonctionne pas toujours : si document.body.scrollHeight et window.innerHeight sont égaux! Il sera de retour NaN (et devrait soulever une DividedByZeroError). Vous ne pouvez pas garantir document.body.scrollHeight > window.innerHeight.

OriginalL'auteur SarathSprakash
5

La logique, c'est comme cela
```
totalValue  = (documentHeight - windowHeight);
currntValue = scrolledValue;
percentage =  (currntValue/ totalValue  ) * 100
```
http://jsfiddle.net/PvVdq/71/
```
   $(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height()-$(window).height(),
            scrollPercent = (s / d)*100;       
        $("#progressbar").attr('value', scrollPercent);
     });
 });
```
Vous devez soustraire de la fenêtre d'affichage de la hauteur de la hauteur en tant que telle: jsfiddle.net/SombreErmine/PvVdq/66
Voici un peu plus d'une version modifiée jsfiddle.net/PvVdq/70
Vous avez besoin d'essayer cela sur une page pour voir si elle fonctionne de la même que dans le violon. Cheers!
Merci, pour une raison quelconque, le violon a travaillé, mais quand je l'ai ajouté à la page, je travaille sur rien ne s'est passé. Merci un tas pour une autre méthode.

OriginalL'auteur Sarath

Je suggère de faire le max de la valeur de la barre de progression dynamique en fonction de la taille de la page.

Modifier le code HTML de votre barre de progression.

<progress id="progressbar" value="0"></progress>

C'est comment votre jQuery.

$(document).ready(function () {
    $(window).scroll(function () {
        var s = $(document).scrollTop(),
            d = $(document).height() - $(window).height();          
        $("#progressbar").attr('max', d);
        $("#progressbar").attr('value', s);
     });
 });

Ceci élimine le besoin pour hacky calculs et fait également de la barre de progression dynamique dans le cas de la plus longue ou plus courte pages.

Travail de DÉMONSTRATION

OriginalL'auteur MarsOne

0

Pour obtenir le courant de défilement rapport, vous devez vérifier si votre document comporte un scrollableHeight premier. Dans ce cas spécial, j'ai choisi de retourner 0.
À côté de calcul est la même que ci-dessus.
```
/**
 * @returns number
 */
function scrollYProgression() {
    const scrollableHeight = window.document.body.scrollHeight - window.innerHeight;
    if (scrollableHeight <= 0) return 0;

    return window.scrollY / scrollableHeight;
}
```
Livré avec jQuery:
```
$(window).scroll(() => {
    $('#progressbar')
        .attr('value', scrollYProgression() * 100);
});
```
Méfiez-vous quand vous écoutez des événements de défilement! Cela peut être très lourd et vous en avez vraiment besoin au plus une fois par repeindre. Vous pouvez vérifier la window.requestAnimationFrame à prévenir les massifs de l'appel à votre méthode (max 60/s).

Concernant le défilement des écouteurs d'événement: http://www.html5rocks.com/en/tutorials/speed/animations

MODIFIER:

Sans jQuery et à l'aide de window.requestAnimationFrame à la limite de déclenchement taux de 60/s
```
/** @return number */
function scrollYProgression() {
    const scrollableHeight = window.document.body.scrollHeight - window.innerHeight;
    if (scrollableHeight <= 0) return 0;

    return window.scrollY / scrollableHeight;
}

/**
 *  @return void
 *  @description DOM element manipulation
 */
function scrollHandler() {
    const progress = scrollYProgression();
    const bar = document.getElementById('progressbar');
    bar.setAttribute('value', progress * 100);
}

/** Start listening */
window.addEventListener('scroll', function(ev){
    window.requestAnimationFrame(scrollHandler);
}, { passive: true });
```
Pourquoi inclure jQuery pour quelque chose d'aussi simple? Et pourquoi tout simplement un lien à l'aide de requestAnimationFrame au lieu de la simple mise en place d'une version qui l'utilise?
Vous avez entièrement raison, jQuery, parce que la question de la première à en faire usage. - Je ajouter une mise en œuvre avec requestAnimationFrame à antirebond appel à un gestionnaire. Merci pour vos commentaires

OriginalL'auteur Antoine

Vous devez vous connecter pour publier un commentaire.

De travail DÉMO