我已经编码了一个滚动指示器，该滚动指示器可以在Microsoft Edge中使用，但不能在Google Chrome中使用

Question

这是HTML：

 <!--*SCROLL INDICATOR-->
            <div class="progress-container">
                <div class="progress-bar" id="myBar"></div>
            </div>

这是CSS：

/* The progress container (grey background) */
    .progress-container {
        width: 100%;
        max-height: 12px;
        background: #ccc;
        position:fixed;
    }

    /* The progress bar (scroll indicator) */
    .progress-bar {
        max-height: 12px;
        background: #4caf50;
        width: 0%;
        position:fixed;
    }

这是javascript：

<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>

预期的输出是滚动指示器出现，但在Chrome中根本没有出现。

Answer 1

将max-height替换为height，我认为它将起作用。 否则，默认情况下0的高度为div，因为killall uwsgi 中没有内容。