JavaScript HTML progress - Barre de progression d'une page

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Scroll</title>

    <style>
        /* Barre de progression fixe */
        
        #scroll-progress-bar {
            position: fixed;
        }
    </style>

</head>

<!-- Event listener -->

<body onscroll="handleScroll(event)">

    <progress id="scroll-progress-bar" value="0" max="100"></progress>

    <p style="padding-top: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et quidem illud ipsum non nimium probo et tantum patior, philosophum loqui de cupiditatibus finiendis. An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat?
        In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Duo Reges: constructio interrete. Quocumque enim modo summum bonum sic exponitur, ut id vacet honestate, nec officia nec virtutes in ea ratione nec amicitiae constare possunt.
        Totum autem id externum est, et quod externum, id in casu est. Ego autem existimo, si honestum esse aliquid ostendero, quod sit ipsum vi sua propter seque expetendum, iacere vestra omnia. Quamquam tu hanc copiosiorem etiam soles dicere. Nec enim,
        omnes avaritias si aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus. </p>

    <p>In ipsa enim parum magna vis inest, ut quam optime se habere possit, si nulla cultura adhibeatur. Quae dici eadem de ceteris virtutibus possunt, quarum omnium fundamenta vos in voluptate tamquam in aqua ponitis. Semovenda est igitur voluptas, non
        solum ut recta sequamini, sed etiam ut loqui deceat frugaliter. Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Qua exposita scire cupio quae causa sit, cur Zeno ab hac antiqua constitutione desciverit, quidnam horum
        ab eo non sit probatum; Tum ego: Non mehercule, inquam, soleo temere contra Stoicos, non quo illis admodum assentiar, sed pudore impedior; Facillimum id quidem est, inquam. Illa videamus, quae a te de amicitia dicta sunt. Quid autem habent admirationis,
        cum prope accesseris? Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Si vero id etiam explanare velles apertiusque diceres nihil eum fecisse nisi voluptatis causa, quo modo eum tandem laturum fuisse existimas? Negat esse eam,
        inquit, propter se expetendam. Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. </p>

    <p>Igitur neque stultorum quisquam beatus neque sapientium non beatus. Nam e quibus locis quasi thesauris argumenta depromerentur, vestri ne suspicati quidem sunt, superiores autem artificio et via tradiderunt. Atque etiam valítudinem, vires, vacuitatem
        doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. </p>

    <p>Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio. Quod maxime efficit
        Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Immo sit sane nihil melius, inquam-nondum enim id quaero-, num propterea idem voluptas est, quod, ut ita dicam, indolentia? Quantum Aristoxeni ingenium consumptum videmus in
        musicis? Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur. </p>

    <p>Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret. An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Pungunt quasi aculeis interrogatiunculis
        angustis, quibus etiam qui assentiuntur nihil commutantur animo et idem abeunt, qui venerant. Et adhuc quidem ita nobis progresso ratio est, ut ea duceretur omnis a prima commendatione naturae. Ex quo magnitudo quoque animi existebat, qua facile
        posset repugnari obsistique fortunae, quod maximae res essent in potestate sapientis. Nam bonum ex quo appellatum sit, nescio, praepositum ex eo credo, quod praeponatur aliis. Sed nimis multa. Hoc est vim afferre, Torquate, sensibus, extorquere
        ex animis cognitiones verborum, quibus inbuti sumus. Maximus dolor, inquit, brevis est. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.
        Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Non laboro, inquit, de nomine. </p>

    <p>Vobis autem, quibus nihil est aliud propositum nisi rectum atque honestum, unde officii, unde agendi principlum nascatur non reperietis. Hic ego: Etsi facit hic quidem, inquam, Piso, ut vides, ea, quae praecipis, tamen mihi grata hortatio tua est.
        Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Sin laboramus, quis est, qui alienae modum statuat industriae? Omnia contraria, quos etiam insanos
        esse vultis. Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus
        tamque multae. Qui cum praetor quaestionem inter sicarios exercuisset, ita aperte cepit pecunias ob rem iudicandam, ut anno proximo P. </p>

    <p>Non dolere, inquam, istud quam vim habeat postea videro; Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Hic ego: Pomponius quidem,
        inquam, noster iocari videtur, et fortasse suo iure. Cupiditates non Epicuri divisione finiebat, sed sua satietate. Quae enim cupiditates a natura proficiscuntur, facile explentur sine ulla iniuria, quae autem inanes sunt, iis parendum non est.
        Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Ut scias me intellegere, primum idem esse dico voluptatem, quod ille don. </p>

    <p>Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Primum in nostrane potestate est, quid meminerimus? Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Quod cum
        ita sit, perspicuum est omnis rectas res atque laudabilis eo referri, ut cum voluptate vivatur. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Quid igitur dubitamus
        in tota eius natura quaerere quid sit effectum? Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum. Quae sunt igitur communia vobis cum antiquis,
        iis sic utamur quasi concessis; </p>

    <p>Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Inde sermone vario sex illa a Dipylo stadia confecimus. Nemo est igitur, quin hanc affectionem animi probet atque laudet, qua non modo utilitas nulla quaeritur, sed contra
        utilitatem etiam conservatur fides. Quantam rem agas, ut Circeis qui habitet totum hunc mundum suum municipium esse existimet? Et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. Primum enim, si
        vera sunt ea, quorum recordatione te gaudere dicis, hoc est, si vera sunt tua scripta et inventa, gaudere non potes. Bonum integritas corporis: misera debilitas. Rem unam praeclarissimam omnium maximeque laudandam, penitus viderent, quonam gaudio
        complerentur, cum tantopere eius adumbrata opinione laetentur? </p>

    <p>Nam si beatus umquam fuisset, beatam vitam usque ad illum a Cyro extructum rogum pertulisset. Atqui, inquit, si Stoicis concedis ut virtus sola, si adsit vitam efficiat beatam, concedis etiam Peripateticis. Tum Lucius: Mihi vero ista valde probata
        sunt, quod item fratri puto. Quid, si etiam iucunda memoria est praeteritorum malorum? Quantum Aristoxeni ingenium consumptum videmus in musicis? Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione
        poneret. </p>

    <p>Qui autem esse poteris, nisi te amor ipse ceperit? Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Nec vero audiendus Hieronymus, cui summum bonum est idem, quod vos interdum vel potius nimium saepe dicitis, nihil dolere.
        Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Ita multa dicunt, quae vix intellegam. A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Satisne vobis videor pro meo iure in vestris
        auribus commentatus? Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. </p>

    <p>Te enim iudicem aequum puto, modo quae dicat ille bene noris. Qui enim existimabit posse se miserum esse beatus non erit. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Ut enim consuetudo loquitur, id solum dicitur honestum, quod
        est populari fama gloriosum. Aberat omnis dolor, qui si adesset, nec molliter ferret et tamen medicis plus quam philosophis uteretur. Quis non odit sordidos, vanos, leves, futtiles? Dicam, inquam, et quidem discendi causa magis, quam quo te aut
        Epicurum reprehensum velim. Nondum autem explanatum satis, erat, quid maxime natura vellet. Hoc mihi cum tuo fratre convenit. Hanc in motu voluptatem -sic enim has suaves et quasi dulces voluptates appellat-interdum ita extenuat, ut M. </p>

    <p>Atqui reperies, inquit, in hoc quidem pertinacem; An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Idcirco enim non desideraret, quia, quod dolore caret, id in voluptate est. Theophrastum tamen adhibeamus ad pleraque, dum modo plus
        in virtute teneamus, quam ille tenuit, firmitatis et roboris. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Commentarios
        quosdam, inquam, Aristotelios, quos hic sciebam esse, veni ut auferrem, quos legerem, dum essem otiosus; Cum autem negant ea quicquam ad beatam vitam pertinere, rursus naturam relinquunt. Cenasti in vita numquam bene, cum omnia in ista Consumis
        squilla atque acupensere cum decimano. Stoici restant, ei quidem non unam aliquam aut alteram rem a nobis, sed totam ad se nostram philosophiam transtulerunt; Nunc vero a primo quidem mirabiliter occulta natura est nec perspici nec cognosci potest.
        Vives, inquit Aristo, magnifice atque praeclare, quod erit cumque visum ages, numquam angere, numquam cupies, numquam timebis. </p>

    <p>Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. Erillus autem ad scientiam omnia revocans unum quoddam bonum vidit, sed nec optimum nec quo vita gubernari
        possit. Si quicquam extra virtutem habeatur in bonis. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Temporibus autem quibusdam et aut officiis debitis
        aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Animadverti, ínquam, te isto modo paulo ante ponere,
        et scio ab Antiocho nostro dici sic solere; Erillus autem ad scientiam omnia revocans unum quoddam bonum vidit, sed nec optimum nec quo vita gubernari possit. Ergo ita: non posse honeste vivi, nisi honeste vivatur? </p>

    <p>Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Desideraret enim valitudinem, vacuitatem doloris, appeteret etiam conservationem sui earumque rerum custodiam finemque, sibi constitueret secundum naturam vivere. Quid ergo attinet
        dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Nam et ille apud Trabeam voluptatem animi nimiam laetitiam dicit eandem, quam ille Caecilianus, qui omnibus laetitiis laetum esse se narrat. Aberat omnis dolor, qui si
        adesset, nec molliter ferret et tamen medicis plus quam philosophis uteretur. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Habes, inquam,
        Cato, formam eorum, de quibus loquor, philosophorum. Familiares nostros, credo, Sironem dicis et Philodemum, cum optimos viros, tum homines doctissimos. Somnum denique nobis, nisi requietem corporibus et is medicinam quandam laboris afferret,
        contra naturam putaremus datum; </p>

    <p>Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Aderamus nos quidem adolescentes, sed multi amplissimi viri, quorum nemo censuit plus Fadiae dandum, quam posset ad eam lege Voconia pervenire. Praeterea et appetendi
        et refugiendi et omnino rerum gerendarum initia proficiscuntur aut a voluptate aut a dolore. Zenonis est, inquam, hoc Stoici. Tum mihi Piso: Quid ergo? Quibus natura iure responderit non esse verum aliunde finem beate vivendi, a se principia rei
        gerendae peti; Nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit. </p>

    <p>Quid est igitur, cur ita semper deum appellet Epicurus beatum et aeternum? Societatem coniunctionis humanae munifice et aeque tuens iustitia dicitur, cui sunt adiunctae pietas, bonitas, liberalitas, benignitas, comitas, quaeque sunt generis eiusdem.
        Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Quid, si reviviscant Platonis illi et deinceps qui eorum auditores fuerunt, et tecum ita loquantur? Minime id
        quidem, inquam, alienum, multumque ad ea, quae quaerimus, explicatio tua ista profecerit. Sed quot homines, tot sententiae; Quae si potest singula consolando levare, universa quo modo sustinebit? Numquam facies. Quid turpius quam sapientis vitam
        ex insipientium sermone pendere? </p>

    <p>Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere. Ex quo intellegitur officium medium quiddam esse, quod neque in
        bonis ponatur neque in contrariis. Concinnus deinde et elegans huius, Aristo, sed ea, quae desideratur, a magno philosopho, gravitas, in eo non fuit; Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi
        potest. Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Quaero igitur, quo modo hae tantae commendationes a natura profectae subito a sapientia relictae sint. Atque adhuc
        ea dixi, causa cur Zenoni non fuisset, quam ob rem a superiorum auctoritate discederet. Nec mihi illud dixeris: Haec enim ipsa mihi sunt voluptati, et erant illa Torquatis. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta
        diximus; An vero, inquit, quisquam potest probare, quod perceptfum, quod. Quis tibi ergo istud dabit praeter Pyrrhonem, Aristonem eorumve similes, quos tu non probas? Nam constitui virtus nullo modo potesti nisi ea, quae sunt prima naturae, ut
        ad summam pertinentia tenebit. </p>

    <p>Nam Metrodorum non puto ipsum professum, sed, cum appellaretur ab Epicuro, repudiare tantum beneficium noluisse; Isto modo, ne si avia quidem eius nata non esset. Sin ea non neglegemus neque tamen ad finem summi boni referemus, non multum ab Erilli
        levitate aberrabimus. An, si id probas, fieri ita posse negas, ut ii, qui virtutis compotes sint, etiam malis quibusdam affecti beati sint? </p>

    <p>Illi enim inter se dissentiunt. In eo autem voluptas omnium Latine loquentium more ponitur, cum percipitur ea, quae sensum aliquem moveat, iucunditas. Ad eos igitur converte te, quaeso. Hoc tu nunc in illo probas. Isto modo ne improbos quidem, si
        essent boni viri. Quia, si mala sunt, is, qui erit in iis, beatus non erit. Multoque hoc melius nos veriusque quam Stoici. </p>



    <script>
        //La barre de progression
        var progressBarScroll = document.getElementById("scroll-progress-bar");

        function handleScroll(event) {
            // A chaque défilement rafraichissement de la valeur de la barre de progression
            progressBarScroll.value = getScrollPercent();
        }

        function getScrollPercent() {
            var docElement = document.documentElement;
            var bodyElement = document.body;
            /* (défilement de page / défilement max) * 100
            Pour tous les navigateurs */
            var scrollTop = (docElement.scrollTop || bodyElement.scrollTop);
            var maxScroll = ((docElement.scrollHeight || bodyElement.scrollHeight) - docElement.clientHeight);
            return (scrollTop / maxScroll) * 100;
        }
    </script>

</body>

</html>

Commentaires