简单的触底加载

 

要用到`bom`的`scrollTop`、`clientHeight`以及`scrollHeight`。

`Node.scrollTop`+`Node.clientHeight`==`Node.scrollHeight`

这里给谁设置了`overflow:scroll;`或者`overflow:auto;`Node就是谁`

• scrollTop　被卷曲的高度
• clientHeight　自身可视区域的高度
• scrollHeight    由内容撑大的真实高度

一个简单的例子：

css:

```

<style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100%;

            height: 20vw;

            ">aqua;

            overflow: auto;

        }

    </style>

html:

```

<div>

        <ul>

            <li>1212</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

        </ul>

    </div>

 ```

<script>

        const divNode = document.querySelector('div');

        divNode.addEventListener('scroll', () => {

            if (divNode.scrollTop + divNode.clientHeight >= divNode.scrollHeight) {

                console.log('到底了');

            }

        });

    </script>

这里因为在使用显示比例缩放的系统上，`scrollTop`可能会提供一个小数，所以是`>=`。