javascript 根据滚动更改进度条值

Change Progress Bar Value based on Scrolling

提问by hakarune

I would like to be able to make my progress bar increase, based on how far I've scrolled and how much is left.

我希望能够根据我滚动的距离和还剩多少来增加我的进度条。

I've tried this: jsFiddleand it doesn't seem to work, I based my script off someone's script that made a block move horizontally based on scroll %.

我试过这个：jsFiddle，它似乎不起作用，我的脚本基于某人的脚本，该脚本基于滚动百分比使块水平移动。

My code:

我的代码：

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

JS:

JS：

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

回答by SarathSprakash

Working DEMO

工作演示

Try this

试试这个

$(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);

});

Hope this helps, Thank you

希望这有帮助，谢谢

回答by Sarath

The logic is like this

逻辑是这样的

totalValue  = (documentHeight - windowHeight);
currntValue = scrolledValue;
percentage =  (currntValue/ totalValue  ) * 100

http://jsfiddle.net/PvVdq/71/

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);
     });
 });

回答by MarsOne

I would suggest making the max value of the progress bar dynamic according to the size of the page.

我建议根据页面的大小动态设置进度条的最大值。

Change the HTML for your progress bar to this.

将进度条的 HTML 更改为此。

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

This is how your jQuery would look.

这就是您的 jQuery 的外观。

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

This eliminates the need for hacky calculations and also makes the progress bar dynamic in case of longer or shorter pages.

这消除了对hacky计算的需要，并且在页面更长或更短的情况下也使进度条动态化。

Working DEMO

工作演示

回答by Antoine

To get the current scrolling ratio, you should check if your document has a scrollableHeight first. In this special case I choosed to return 0. Next calculation is the same as above.

要获得当前的滚动率，您应该首先检查您的文档是否具有 scrollableHeight。在这种特殊情况下，我选择返回0。接下来的计算同上。

/**
 * @returns number
 */
function scrollYProgression() {
    const scrollableHeight = window.document.body.scrollHeight - window.innerHeight;
    if (scrollableHeight <= 0) return 0;

    return window.scrollY / scrollableHeight;
}

Bundled up with jQuery:

与jQuery捆绑在一起：

$(window).scroll(() => {
    $('#progressbar')
        .attr('value', scrollYProgression() * 100);
});

Beware when you listen to scroll events! This can be really heavy and you really need it at most once per repaint. You can check the window.requestAnimationFrameto prevent massive call to your method (max 60/s).

当您收听滚动事件时要小心！这可能真的很重，每次重绘时您最多需要一次。您可以检查window.requestAnimationFrame以防止大量调用您的方法（最大 60/s）。

Regarding scroll event listeners: http://www.html5rocks.com/en/tutorials/speed/animations

关于滚动事件侦听器：http: //www.html5rocks.com/en/tutorials/speed/animations

EDIT:

编辑：

Without jQuery and using window.requestAnimationFrameto limite trigger rate to 60/s

不使用 jQuery 并使用window.requestAnimationFrame将触发速率限制为 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 });

回答by Zach Saucier

In the modern web this can be done fairly easily in vanilla js (basic approach pulled from this article):

在现代网络中，这可以在 vanilla js 中相当容易地完成（从本文中提取的基本方法）：

var progressBar = document.querySelector('progress');

var winheight, docheight, trackLength, throttlescroll;
 
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getMeasurements() {
    winheight = window.innerHeight || (document.documentElement || document.body).clientHeight;
    docheight = getDocHeight();
    trackLength = docheight - winheight
}

function update() {
   var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
    var pctScrolled = scrollTop / trackLength * 100;
    var wholePct = Math.floor(pctScrolled);
    progressBar.value = pctScrolled;
}

getMeasurements();
window.addEventListener('scroll', update, false); 
window.addEventListener("resize", getMeasurements, false);

progress {
    position: fixed;
    top: 0;
    left: 0;
    
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
}

<progress max="100"></progress>


<p>Purr when being pet give me some of your food give me some of your food give me some of your food meh, i don't want it disappear for four days and return home with an expensive injury; bite the vet chew iPad power cord, but human give me attention meow or scream for no reason at 4 am. Lick sellotape hiss and stare at nothing then run suddenly away fall over dead (not really but gets sypathy) but sit in a box for hours, destroy the blinds. Meow all night having their mate disturbing sleeping humans and sometimes switches in french and say "miaou" just because well why not and pooping rainbow while flying in a toasted bread costume in space. Refuse to leave cardboard box eat from dog's food purr while eating. Leave hair everywhere lick master's hand at first then bite because im moody give attitude. </p>

<p>Walk on car leaving trail of paw prints on hood and windshield attack the child so lick arm hair so relentlessly pursues moth, yet man running from cops stops to pet cats, goes to jail. Meow in empty rooms cough furball so give me some of your food give me some of your food give me some of your food meh, i don't want it fish i must find my red catnip fishy fish jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water pelt around the house and up and down stairs chasing phantoms so pee in the shoe. Munch, munch, chomp, chomp. Licks paws chase red laser dot or tuxedo cats always looking dapper meow i like frogs and 0 gravity or groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Loves cheeseburgers. Toilet paper attack claws fluff everywhere meow miao french ciao litterbox play riveting piece on synthesizer keyboard put butt in owner's face step on your keyboard while you're gaming and then turn in a circle attack the dog then pretend like nothing happened. </p>

However, it's probably best to limit how much the scroll function is ran by a requestAnimationFrame, in which case it's a little more complex:

但是，最好限制 a 运行的滚动功能的数量requestAnimationFrame，在这种情况下，它会稍微复杂一些：

var progressBar = document.querySelector('progress'),
    ticking = false;

var winheight, docheight, trackLength, throttlescroll;
 
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getMeasurements() {
    winheight = window.innerHeight || (document.documentElement || document.body).clientHeight;
    docheight = getDocHeight();
    trackLength = docheight - winheight
}

function requestTick() {
    if(!ticking) {
        requestAnimationFrame(update);
        ticking = true;
    }
}

function update() {
   var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
    var pctScrolled = scrollTop / trackLength * 100;
    var wholePct = Math.floor(pctScrolled);
    progressBar.value = pctScrolled;
    
    ticking = false;
}

getMeasurements();
window.addEventListener('scroll', requestTick, false); 
window.addEventListener("resize", getMeasurements, false);

progress {
    position: fixed;
    top: 0;
    left: 0;
    
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
}

<progress max="100" value="0"></progress>


<p>Purr when being pet give me some of your food give me some of your food give me some of your food meh, i don't want it disappear for four days and return home with an expensive injury; bite the vet chew iPad power cord, but human give me attention meow or scream for no reason at 4 am. Lick sellotape hiss and stare at nothing then run suddenly away fall over dead (not really but gets sypathy) but sit in a box for hours, destroy the blinds. Meow all night having their mate disturbing sleeping humans and sometimes switches in french and say "miaou" just because well why not and pooping rainbow while flying in a toasted bread costume in space. Refuse to leave cardboard box eat from dog's food purr while eating. Leave hair everywhere lick master's hand at first then bite because im moody give attitude. </p>

<p>Walk on car leaving trail of paw prints on hood and windshield attack the child so lick arm hair so relentlessly pursues moth, yet man running from cops stops to pet cats, goes to jail. Meow in empty rooms cough furball so give me some of your food give me some of your food give me some of your food meh, i don't want it fish i must find my red catnip fishy fish jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water pelt around the house and up and down stairs chasing phantoms so pee in the shoe. Munch, munch, chomp, chomp. Licks paws chase red laser dot or tuxedo cats always looking dapper meow i like frogs and 0 gravity or groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Loves cheeseburgers. Toilet paper attack claws fluff everywhere meow miao french ciao litterbox play riveting piece on synthesizer keyboard put butt in owner's face step on your keyboard while you're gaming and then turn in a circle attack the dog then pretend like nothing happened. </p>