如何判断滚动条到达底部？

如何判断滚动条是否到达底部？

Element.scrollTop ：获取滚动条距离元素顶部的距离；

Element.clientWidth ：获取当前可见区域的高度；

Element.scrollHeight ：获取文档的总高度；

实现思路：滚动条距离元素顶部的距离 + 当前可见区域的高度 >= 文档的总高度，滚动条到达底部，发起网络请求。

在window上监听和元素上监听的区别？

在H5移动端中 window 监听事件，会影响到其他页面的值，因为不同的tab标签页面，处于同一个窗口，所以在元素上绑定监听事件比较合适。

// 获取需要监听滚动条的元素
const element = document.getElementById('your-element-id')

// 添加一个事件监听器，在元素滚动时触发
element.addEventListener('scroll', function () {
	// 计算滚动条距离元素顶部的距离
	const scrollTop = element.scrollTop
	// 计算当前可见区域的高度
	const visibleHeight = element.clientHeight
	// 计算滚动条的总高度
	const totalHeight = element.scrollHeight
	// 到达底部时发起网络请求
	if (Math.round(scrollTop + visibleHeight) >= totalHeight) {
		// 发起网络请求
            fetch('http:www.api.com')
                .then((response) => response.json())
		.then((data) => {
                    // 处理返回的数据
		})
		.catch((error) => {
                    console.log(error)
		})
	}
})

然而在不同的浏览器测试，有的正常，有的下拉半天没反应是怎么回事呢？ ♂

scrollTop有小数点，不同的浏览器不同，可以使用Math.round()进行四舍五入。