DOM滚动触底检测

这里用到了几个基本的css变量：

clientHeight：可视区域的高度
scrollTop：可视区域距离父容器顶部的距离
scrollHeight：父容器内部总高度，包括被卷(scroll)的高度
clientWidth：可视区域的宽度
scrollLeft：可视区域距离父容器左部的距离
scrollWidth：父容器内部总宽度，包括被卷(scroll)的宽度

上代码~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            height: 400px;
            width: 280px;
            overflow-y: scroll;
            background-color: black;
        }
        #inner {
            height: 1000px;
        }

        #wrapper2 {
            height: 280px;
            width: 400px;
            overflow-x: scroll;
            background-color: black;
        }
        #inner2 {
            width: 1000px;
        }
    </style>
</head>
<body>
    <h1>触底触顶检测</h1>
    <div id="wrapper">
        <div id="inner"></div>
    </div>
    <hr>
    <h1>触左触右检测</h1>
    <div id="wrapper2">
        <div id="inner2"></div>
    </div>
    <script>
        let $wrapper = document.getElementById('wrapper');
        $wrapper.addEventListener('scroll', (({target}) => {
            let touchBottom = target.clientHeight + target.scrollTop === target.scrollHeight,
                touchTop = target.scrollTop === 0;
            console.log(`touchBottom: ${touchBottom}`);
            console.log(`touchTop: ${touchTop}`);
            if(touchBottom) {
                alert('滚动触底了！');
            } else if(touchTop) {
                alert('滚动触顶了！');
            }
        }))

        let $wrapper2 = document.getElementById('wrapper2');
        $wrapper2.addEventListener('scroll', (({target}) => {
            let touchRight = target.clientWidth + target.scrollLeft === target.scrollWidth,
                touchLeft = target.scrollLeft === 0;
            console.log(`touchRight: ${touchRight}`);
            console.log(`touchLeft: ${touchLeft}`);
            if(touchRight) {
                alert('滚动触右了！');
            } else if(touchLeft) {
                alert('滚动触左了！');
            }
        }))
    </script>
</body>
</html>