Scroll indicator JavaScript

I use the following code for a scroll indicator which I include on multiple pages.

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

But some of the pages are not able to scroll due to lack of content I am trying to get the scroll indicator to also be filled I can't figure out why it's not filling if it cant scroll ( I am not good with JavaScript either :3 )

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

add a comment |

I use the following code for a scroll indicator which I include on multiple pages.

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

add a comment |

I use the following code for a scroll indicator which I include on multiple pages.

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

I use the following code for a scroll indicator which I include on multiple pages.

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>

        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

javascript html css

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

edited Nov 14 '18 at 8:40

Aravind

3,20811833

edited Nov 14 '18 at 8:40

Aravind

3,20811833

edited Nov 14 '18 at 8:40

Aravind

3,20811833

asked Nov 14 '18 at 8:32

Chris. P

154

asked Nov 14 '18 at 8:32

Chris. P

154

asked Nov 14 '18 at 8:32

Chris. P

154

add a comment |

4 Answers
4

active

oldest

votes

Two things:

Execute your function at least once when the page is loaded

Check if document has no scroll and set full width in that case.

Here it is:

// When the user scrolls the page, execute myFunction

window.onscroll = function () {

    myFunction()

};



// Execute myFunction once when the page is loaded

window.onload = function() {

  myFunction();

}



function myFunction() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = 100; // Default value: fill width



    // Only if document is scrollable

    if (height > 0) {

        scrolled = (winScroll / height) * 100;

    }

    document.getElementById("myBar").style.width = scrolled + "%";

}

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

add a comment |

Try this:

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

answered Nov 14 '18 at 8:48

joshua miller

716516

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

add a comment |

You cant't divide by zero
try this

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

add a comment |

The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:

    let heightClient = window.innerHeight;

    let body = document.body,

        html = document.documentElement;



    let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,

        html.clientHeight, html.scrollHeight, html.offsetHeight );



    if(heightClient < heightDocument){

        window.onscroll = function() {myFunction()};

    }else document.getElementById("myBar").style.width = "100%";



    function myFunction() {

        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        let scrolled = (winScroll / height) * 100;

        document.getElementById("myBar").style.width = scrolled + "%";

    }

</script>

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295911%2fscroll-indicator-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

Two things:

Execute your function at least once when the page is loaded

Check if document has no scroll and set full width in that case.

Here it is:

// When the user scrolls the page, execute myFunction

window.onscroll = function () {

    myFunction()

};



// Execute myFunction once when the page is loaded

window.onload = function() {

  myFunction();

}



function myFunction() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = 100; // Default value: fill width



    // Only if document is scrollable

    if (height > 0) {

        scrolled = (winScroll / height) * 100;

    }

    document.getElementById("myBar").style.width = scrolled + "%";

}

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

add a comment |

Two things:

Execute your function at least once when the page is loaded

Check if document has no scroll and set full width in that case.

Here it is:

// When the user scrolls the page, execute myFunction

window.onscroll = function () {

    myFunction()

};



// Execute myFunction once when the page is loaded

window.onload = function() {

  myFunction();

}



function myFunction() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = 100; // Default value: fill width



    // Only if document is scrollable

    if (height > 0) {

        scrolled = (winScroll / height) * 100;

    }

    document.getElementById("myBar").style.width = scrolled + "%";

}

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

add a comment |

Two things:

Execute your function at least once when the page is loaded

Check if document has no scroll and set full width in that case.

Here it is:

// When the user scrolls the page, execute myFunction

window.onscroll = function () {

    myFunction()

};



// Execute myFunction once when the page is loaded

window.onload = function() {

  myFunction();

}



function myFunction() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = 100; // Default value: fill width



    // Only if document is scrollable

    if (height > 0) {

        scrolled = (winScroll / height) * 100;

    }

    document.getElementById("myBar").style.width = scrolled + "%";

}

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

Two things:

Execute your function at least once when the page is loaded

Check if document has no scroll and set full width in that case.

Here it is:

// When the user scrolls the page, execute myFunction

window.onscroll = function () {

    myFunction()

};



// Execute myFunction once when the page is loaded

window.onload = function() {

  myFunction();

}



function myFunction() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    var scrolled = 100; // Default value: fill width



    // Only if document is scrollable

    if (height > 0) {

        scrolled = (winScroll / height) * 100;

    }

    document.getElementById("myBar").style.width = scrolled + "%";

}

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

answered Nov 14 '18 at 8:50

DanieleAlessandra

626511

add a comment |

Try this:

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

answered Nov 14 '18 at 8:48

joshua miller

716516

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

add a comment |

Try this:

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

answered Nov 14 '18 at 8:48

joshua miller

716516

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

add a comment |

Try this:

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

answered Nov 14 '18 at 8:48

joshua miller

716516

Try this:

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

.progress-container {

        width: 100%;

        height: 8px;

        background: #ccc;

        position: fixed;

        top: 0;

        z-index: 1000;

    }

    

    .progress-bar {

        height: 8px;

        background: #4caf50;

        width: 0%;

    }

    <div class="fixedBar">

        <div class="header">

            <div class="progress-container">

                <div class="progress-bar" id="myBar"></div>

            </div>

        </div>

    </div>

    

    

    <script>



         window.onload = function () {

             if (document.documentElement.scrollHeight === document.documentElement.clientHeight){

                 document.getElementById("myBar").style.width = "100%";

             }

         };



        // When the user scrolls the page, execute myFunction

        window.onscroll = function () {

            myFunction()

        };

    

        function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = (winScroll / height) * 100;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

    </script>

answered Nov 14 '18 at 8:48

joshua miller

716516

answered Nov 14 '18 at 8:48

joshua miller

716516

answered Nov 14 '18 at 8:48

joshua miller

716516

answered Nov 14 '18 at 8:48

joshua miller

716516

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

add a comment |

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

Thanks for the quick reply it works !!! <3

– Chris. P
Nov 14 '18 at 8:54

add a comment |

You cant't divide by zero
try this

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

add a comment |

You cant't divide by zero
try this

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

add a comment |

You cant't divide by zero
try this

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

You cant't divide by zero
try this

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

function myFunction() {

            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

            var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;

            document.getElementById("myBar").style.width = scrolled + "%";

        }

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

edited Nov 14 '18 at 8:51

Brendan Nee

2,47312328

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

answered Nov 14 '18 at 8:49

Wladimir Diskowski

586

add a comment |

The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:

    let heightClient = window.innerHeight;

    let body = document.body,

        html = document.documentElement;



    let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,

        html.clientHeight, html.scrollHeight, html.offsetHeight );



    if(heightClient < heightDocument){

        window.onscroll = function() {myFunction()};

    }else document.getElementById("myBar").style.width = "100%";



    function myFunction() {

        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        let scrolled = (winScroll / height) * 100;

        document.getElementById("myBar").style.width = scrolled + "%";

    }

</script>

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

add a comment |

The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:

    let heightClient = window.innerHeight;

    let body = document.body,

        html = document.documentElement;



    let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,

        html.clientHeight, html.scrollHeight, html.offsetHeight );



    if(heightClient < heightDocument){

        window.onscroll = function() {myFunction()};

    }else document.getElementById("myBar").style.width = "100%";



    function myFunction() {

        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        let scrolled = (winScroll / height) * 100;

        document.getElementById("myBar").style.width = scrolled + "%";

    }

</script>

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

add a comment |

The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:

    let heightClient = window.innerHeight;

    let body = document.body,

        html = document.documentElement;



    let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,

        html.clientHeight, html.scrollHeight, html.offsetHeight );



    if(heightClient < heightDocument){

        window.onscroll = function() {myFunction()};

    }else document.getElementById("myBar").style.width = "100%";



    function myFunction() {

        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        let scrolled = (winScroll / height) * 100;

        document.getElementById("myBar").style.width = scrolled + "%";

    }

</script>

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:

    let heightClient = window.innerHeight;

    let body = document.body,

        html = document.documentElement;



    let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,

        html.clientHeight, html.scrollHeight, html.offsetHeight );



    if(heightClient < heightDocument){

        window.onscroll = function() {myFunction()};

    }else document.getElementById("myBar").style.width = "100%";



    function myFunction() {

        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        let scrolled = (winScroll / height) * 100;

        document.getElementById("myBar").style.width = scrolled + "%";

    }

</script>

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

edited Nov 14 '18 at 9:12

answered Nov 14 '18 at 8:50

marius-serban

answered Nov 14 '18 at 8:50

marius-serban

answered Nov 14 '18 at 8:50

marius-serban

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk