根据滚动更改进度条值

Question

我希望能够根据我滚动的距离以及剩余的数量来增加我的进度条。

我试过这个： jsFiddle ，它似乎不起作用，我根据某人的脚本创建了一个脚本，使得一个块基于scroll％水平移动。

我的代码：

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

Answer 1

工作演示

试试这个

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

});

希望这有帮助，谢谢

Answer 2

逻辑是这样的

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

Answer 3

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

将进度条的HTML更改为此。

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

这就是你的jQuery的外观。

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

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

工作演示

Answer 4

要获得当前的滚动比率，您应首先检查文档是否具有scrollableHeight。 在这个特殊情况下，我选择返回0 。 下一次计算与上述相同。

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

    return window.scrollY / scrollableHeight;
}

捆绑了jQuery ：

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

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

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

编辑 ：

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

Answer 5

在现代网络中，这可以在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> 

但是，最好限制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>