Progress values incorrect when changing offset #3
Comments
|
Hello! Do you mean when you change it dynamically or when you set the |
|
Hey Ryan, consider the page code I added at the bottom (I tried a JSFiddle but there seems to behave differently - https://jsfiddle.net/c9feoxaj/ ). I took the page source from progress example (https://rdmurphy.github.io/scroll-scene-element/progress) and I added an offset of 0.25. I can add it as: scene.offset = 0.25;Or I can add it like this: <scroll-scene progress offset="0.25">Both have the same effect. With a 0.25 offset, I'm expecting that the triggering point would be 25% from the top of the page. With: const offset = 0.25;Which styles the midpoint line, this puts the triggering line at 75% from the top. I'm thought this is a calculation typo, but what's interesting is when you scroll, the progress counter triggers at the top of the page ~25% as expected, but the background colour change from: document.addEventListener('scroll-scene-enter', ({ detail }) => {
detail.element.classList.add('active');
});Kicks in at the bottom of the page where the midpoint line is. But I think this also affects the progress counter, as it don't end at 100%, sometimes it stops 1/4 way through. Any offset other than 0.5 seems to behave strangely. Other than this I'm really liking this module. Thank you Ryan for all your work on this. <!DOCTYPE html>
<html lang="en">
<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>scroll-scene progress</title>
<style>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0 0 75vh;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
margin-left: auto;
margin-right: auto;
max-width: 600px;
padding-left: 1rem;
padding-right: 1rem;
}
.intro-text {
margin-bottom: 30vh;
}
.intro-text p {
line-height: 1.5;
margin-left: auto;
margin-right: auto;
max-width: 600px;
padding-left: 1rem;
padding-right: 1rem;
}
scroll-scene {
align-items: center;
font-family: monospace;
background-color: lightyellow;
color: grey;
display: flex;
font-size: 1.25rem;
text-align: center;
justify-content: center;
width: 100%;
}
scroll-scene.active {
background-color: paleturquoise;
}
scroll-scene + scroll-scene {
margin-top: 30px;
}
.midpoint {
border-top: 2px dotted black;
height: 0px;
left: 0px;
position: fixed;
width: 100%;
z-index: 9000;
}
</style>
<script src="https://unpkg.com/scroll-scene-element/dist/scroll-scene-element.js" type="module"></script>
<script type="module">
const offset = 0.25;
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; // The maximum is inclusive and the minimum is inclusive
}
const scenes = document.querySelectorAll('scroll-scene');
scenes.forEach((scene) => {
scene.style.padding = getRandomIntInclusive(200, 400) + 'px 0';
scene.offset = 0.25;
})
document.querySelector('.midpoint').style.top = (1 - offset) * 100 + '%';
document.addEventListener('scroll-scene-enter', ({ detail }) => {
detail.element.classList.add('active');
});
document.addEventListener('scroll-scene-exit', ({ detail }) => {
detail.element.classList.remove('active');
});
document.addEventListener('scroll-scene-progress', ({ detail }) => {
const { progress } = detail;
const progressElement = detail.element.querySelector('.progress');
progressElement.textContent = `${(progress * 100).toFixed(1)}%`;
});
</script>
</head>
<body>
<h1>scroll-scene progress example</h1>
<div class="intro-text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet modi
accusamus fuga, itaque assumenda repellat cumque minus sunt voluptatibus
officia corrupti voluptatem aut explicabo dignissimos recusandae
nesciunt similique? Praesentium tempore maiores officiis assumenda
similique ipsam amet, magnam possimus modi. Totam, laborum. Aut harum
est, consequatur quas rerum explicabo ad ut.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident non
sequi eveniet ea aliquam dolorem vel perspiciatis voluptatem sapiente,
consequuntur, iste eligendi. Excepturi aspernatur maxime sed. Autem
consectetur maxime non nostrum, aspernatur sint ex minima maiores unde
odit obcaecati fugit cumque minus laboriosam, exercitationem
voluptatibus.
</p>
</div>
<scroll-scene progress>
<div>
<p>Scene 1</p>
<p class="progress">0.0%</p>
</div>
</scroll-scene>
<scroll-scene progress>
<div>
<p>Scene 2</p>
<p class="progress">0.0%</p>
</div>
</scroll-scene>
<scroll-scene progress>
<div>
<p>Scene 3</p>
<p class="progress">0.0%</p>
</div>
</scroll-scene>
<scroll-scene progress>
<div>
<p>Scene 4</p>
<p class="progress">0.0%</p>
</div>
</scroll-scene>
<scroll-scene progress>
<div>
<p>Scene 5</p>
<p class="progress">0.0%</p>
</div>
</scroll-scene>
<div class="midpoint"></div>
</body>
</html> |
|
All right that helped! You've found not one, but two bugs, so bravo! The dynamic setting of |
|
All right figured out the |
|
Fixed in |
Using this as an example:
https://rdmurphy.github.io/scroll-scene-element/progress
If you change the offset from the default 0.5, for example to 0.75 the progress values are incorrect.
The text was updated successfully, but these errors were encountered: