console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.container {
			margin: auto;
			width: 600px;
			height: 600px;
			overflow-y: scroll;
			overflow-x: hidden;
		}

		.container>.content {
			height: 1000px;
			width: 1000px;
			background: blue;
		}
	</style>
</head>

<body>
	<div style="margin: auto;">防抖</div>
	<div class="container">
		<div class="content">

		</div>
	</div>
</body>
<script src="../index.js">

</script>
<script>
/**
 * 
 * @params { Function } func - 触发后，在wait期间，没有再次触发，就会执行
 * @params { number } wait
 */
function debounce(func, wait) {
    var timer = undefined;
    return function() {
        var that = this;
        var args = arguments;
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            func.call(that, ...args);
        }, wait)
    }
}
const container = document.getElementsByClassName('container')[0];
const content = document.getElementsByClassName('content')[0];
container.addEventListener('scroll', debounce(e => {
    if(container.scrollTop + parseInt(getComputedStyle(container).height) + 100 >= container.scrollHeight) {
        let ele = content.cloneNode(true);
        ele.style.background = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
        container.appendChild(ele);
    }
}, 1000))

</script>

</html>