Skip to content

Commit a3d4afe

Browse files
committed
Separate enableScroller and indicatorPresent conditonals
1 parent be6bcbf commit a3d4afe

File tree

1 file changed

+45
-43
lines changed

1 file changed

+45
-43
lines changed

src/gatsby-browser.js

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -25,49 +25,51 @@ exports.onClientEntry = (a, pluginOptions = {}) => {
2525
// check if viewport already has a scroll indicator
2626
const indicatorPresent = document.querySelector(`#${node.id}`);
2727

28-
if (enableScroller && !indicatorPresent) {
29-
document.body.appendChild(node);
30-
let scrolling = false;
31-
const indicator = document.getElementById(node.id);
32-
// Determine width of scroll indicator
33-
const getIndicatorPercentageWidth = (currentPos, totalScroll) => {
34-
return Math.floor((currentPos / totalScroll) * 100);
35-
};
36-
// Find the total height of scrolling window
37-
const getScrollHeight = () => {
38-
// https://javascript.info/size-and-scroll-window#width-height-of-the-document
39-
return Math.max(
40-
document.body.scrollHeight,
41-
document.documentElement.scrollHeight,
42-
document.body.offsetHeight,
43-
document.documentElement.offsetHeight,
44-
document.body.clientHeight,
45-
document.documentElement.clientHeight
46-
);
47-
};
48-
// Add throttled listener to update on scroll
49-
window.addEventListener('scroll', function() {
50-
let currentPos = window.scrollY,
51-
innerHeight = window.innerHeight,
52-
scrollHeight = getScrollHeight(),
53-
scrollDistance = scrollHeight - innerHeight;
54-
if (!scrolling) {
55-
window.requestAnimationFrame(function() {
56-
let indicatorWidth = getIndicatorPercentageWidth(
57-
currentPos,
58-
scrollDistance
59-
);
60-
indicator.setAttribute(
61-
'style',
62-
`width: ${indicatorWidth}%;position: fixed;height: 3px;background-color: ${
63-
options.color
64-
};top: 0;left: 0;transition:width 0.25s`
65-
);
66-
scrolling = false;
67-
});
68-
scrolling = true;
69-
}
70-
});
28+
if (enableScroller) {
29+
if (!indicatorPresent) {
30+
document.body.appendChild(node);
31+
let scrolling = false;
32+
const indicator = document.getElementById(node.id);
33+
// Determine width of scroll indicator
34+
const getIndicatorPercentageWidth = (currentPos, totalScroll) => {
35+
return Math.floor((currentPos / totalScroll) * 100);
36+
};
37+
// Find the total height of scrolling window
38+
const getScrollHeight = () => {
39+
// https://javascript.info/size-and-scroll-window#width-height-of-the-document
40+
return Math.max(
41+
document.body.scrollHeight,
42+
document.documentElement.scrollHeight,
43+
document.body.offsetHeight,
44+
document.documentElement.offsetHeight,
45+
document.body.clientHeight,
46+
document.documentElement.clientHeight
47+
);
48+
};
49+
// Add throttled listener to update on scroll
50+
window.addEventListener('scroll', function() {
51+
let currentPos = window.scrollY,
52+
innerHeight = window.innerHeight,
53+
scrollHeight = getScrollHeight(),
54+
scrollDistance = scrollHeight - innerHeight;
55+
if (!scrolling) {
56+
window.requestAnimationFrame(function() {
57+
let indicatorWidth = getIndicatorPercentageWidth(
58+
currentPos,
59+
scrollDistance
60+
);
61+
indicator.setAttribute(
62+
'style',
63+
`width: ${indicatorWidth}%;position: fixed;height: 3px;background-color: ${
64+
options.color
65+
};top: 0;left: 0;transition:width 0.25s`
66+
);
67+
scrolling = false;
68+
});
69+
scrolling = true;
70+
}
71+
});
72+
}
7173
} else {
7274
// Try to assign scrollIndicator if it is already attached to the DOM
7375
const scrollIndicator = document.querySelector(

0 commit comments

Comments
 (0)