1
1
let progressTimeout ;
2
+ let rafId ;
2
3
3
4
function getContentHeight ( ) {
4
5
const content = document . querySelector ( ".blog-inner-content" ) ;
@@ -11,18 +12,21 @@ function getContentHeight() {
11
12
12
13
function showProgressIndicator ( progressContainer ) {
13
14
progressContainer . classList . add ( "visible" ) ;
14
- progressContainer . style . animation = " none" ;
15
+ progressContainer . style . animation = ' none' ;
15
16
}
16
17
17
18
function hideProgressIndicator ( progressContainer ) {
18
- progressContainer . style . animation = "fadeOut 0.5s forwards" ;
19
+ progressContainer . style . animation = 'fadeOut 0.5s forwards' ;
20
+ setTimeout ( ( ) => {
21
+ progressContainer . classList . remove ( 'visible' ) ;
22
+ } , 500 ) ;
19
23
}
20
24
21
25
window . initCircularReadingProgress = ( ) => {
22
- const progressBar = document . getElementById ( " progressBar" ) ;
26
+ const progressBar = document . getElementById ( ' progressBar' ) ;
23
27
const progressContainer = progressBar . closest ( ".progress-container" ) ;
24
28
25
- window . addEventListener ( "scroll" , ( ) => {
29
+ const onScroll = ( ) => {
26
30
clearTimeout ( progressTimeout ) ;
27
31
28
32
const contentHeight = getContentHeight ( ) ;
@@ -37,5 +41,13 @@ window.initCircularReadingProgress = () => {
37
41
progressTimeout = setTimeout ( ( ) => {
38
42
hideProgressIndicator ( progressContainer ) ;
39
43
} , 2000 ) ;
44
+
45
+ rafId = null ;
46
+ } ;
47
+
48
+ window . addEventListener ( 'scroll' , ( ) => {
49
+ if ( ! rafId ) {
50
+ rafId = requestAnimationFrame ( onScroll ) ;
51
+ }
40
52
} ) ;
41
- } ;
53
+ } ;
0 commit comments