根据滚动更改进度条值
Change Progress Bar Value based on Scrolling
本文关键字:滚动 更新时间:2023-09-26
我希望能够根据我滚动的距离和剩余的数量来增加我的进度条。
我试过这个:jsFiddle,它似乎不起作用,我基于某人的脚本,该脚本使块根据滚动%水平移动。
我的代码:
<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);
});
});
工作演示
试试这个
$(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);
});
希望这有帮助,谢谢
逻辑是这样的
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);
});
});
我建议根据页面的大小动态显示进度条的最大值。
将进度条的 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);
});
});
这消除了对黑客计算的需要,并且还可以在页面较长或较短的情况下使进度条动态。
工作演示
在现代网络中,这可以在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>
要获得当前的滚动比率,您应该先检查您的文档是否具有可滚动高度。在这种特殊情况下,我选择返回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 });
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS)上的jQuery平滑滚动问题
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- JavaScript上下滚动不可预测
- 滚动和表格
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 循环滚动数组
- 滚动以修复向上滚动的问题
- css停止图像在滚动中移动