获取滚动条距离底部的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滚动条距离底部的距离</title>
    </head>
    <body>
        <div class="box">
            <div style="height:10000px;"></div>
        </div>
        <script>
            window.addEventListener('scroll',function(){
                console.log(document.documentElement.scrollTop);//代表目前滚动条和最上方的距离多长
                console.log(document.documentElement.scrollHeight);//代表整个滚动条多长
                console.log(document.documentElement.clientHeight);
                console.log(document.documentElement.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight);
            })
        </script>
    </body>
</html>