Hello j'ai un petit souci je recherche une barre de progression de lecture qui lit uniquement le contenu du texte "contents", la plupart que j'ai trouvé ne lissent que malheureusement tout le contenu c'est à dire du haut de l'ascenseur jusqu'en bas.
Y'a des progress bar reader des blogs qui fonctionnent très bien et lissent juste le contenu du blog, mais moi je voudrai faire pareil juste avec le content.
Le code :
<script>let processScroll = () => {
let docElem = document.documentElement,
docBody = document.body,
scrollTop = docElem['scrollTop'] || docBody['scrollTop'],
scrollBottom = (docElem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight,
scrollPercent = scrollTop / scrollBottom * 100+ '%';
console.log(scrollTop + ' / ' + scrollBottom + ' / ' + scrollPercent);
document.getElementById("progress-baro").style.setProperty("--scrollAmount", scrollPercent);
document.getElementById("progress-baro").innerHTML= Math.round(scrollTop / scrollBottom *100) + "%";
}
document.addEventListener('scroll', processScroll);</script>
css
#progress-baro {
--scrollAmount: 0%;
width: var(--scrollAmount);
background-repeat:repeat;
position: fixed;
bottom: 0;
z-index:10000000000000000000000;
}
Si quelques peut m'aider ;-)
Merci
Y'a des progress bar reader des blogs qui fonctionnent très bien et lissent juste le contenu du blog, mais moi je voudrai faire pareil juste avec le content.
Le code :
<script>let processScroll = () => {
let docElem = document.documentElement,
docBody = document.body,
scrollTop = docElem['scrollTop'] || docBody['scrollTop'],
scrollBottom = (docElem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight,
scrollPercent = scrollTop / scrollBottom * 100+ '%';
console.log(scrollTop + ' / ' + scrollBottom + ' / ' + scrollPercent);
document.getElementById("progress-baro").style.setProperty("--scrollAmount", scrollPercent);
document.getElementById("progress-baro").innerHTML= Math.round(scrollTop / scrollBottom *100) + "%";
}
document.addEventListener('scroll', processScroll);</script>
css
#progress-baro {
--scrollAmount: 0%;
width: var(--scrollAmount);
background-repeat:repeat;
position: fixed;
bottom: 0;
z-index:10000000000000000000000;
}
Si quelques peut m'aider ;-)
Merci