手机端判断滚动条到达底部

发表于 | 分类于
字数统计: 484 字 | 阅读时长 ≈ 2 分钟

最近项目里要做一个滚动条滑动到底部再上垃就翻页的效果，手机谷歌浏览器判断出现偏差，原因是因为获取视窗高度时与其他浏览器不同，需要兼容写法。

但其实不同的浏览器对各种高度的解析是不一样的，所以都需要兼容性写法。

js判断滚动条滚动到底部

如何判断滚动条到底底部呢

文档高度 - 滚出可视区的高度 === 可视区高度

但移动端有些浏览器有下拉上垃回弹所以可以改写为,兼容性更好一些

文档高度 - 滚出可视区的高度 <= 可视区高度

或者（其实是一个意思 哈哈哈）

文档高度 - （滚出可视区的高度 + 可视区高度） <= 0

兼容性写法

相关的

获取文档高度：

1
2
3
4
5
6
7
8
9
10
11
12
function getDocumentHeight () {
  const body = document.body
  const html = document.documentElement
  const height = Math.max(
    body.offsetHeight,
    body.scrollHeight,
    html.clientHeight,
    html.offsetHeight,
    html.scrollHeight
  )
  return height
}

文档滚出可视区的高度：

1
2
3
4
function getScrollTop () {
    const scrollTop =(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
    return scrollTop
}

可视区高度：(我遇到的问题就是没有写window.innerHeight，手机谷歌浏览器获取的可视区高度跟别的浏览器就不一样，加上以后就没问题了)

1
2
3
4
5
6
7
8
function getClient() {
    const client = {}

    client.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    client.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    return client
  }
}

判断到底底部：

1
2
3
if (getDocumentHeight() - getScrollTop() <= getClient().height) {
    console.log('到达底部')
}

其他

元素相对文档偏移：

1
2
3
4
5
6
7
8
function getOffset (el) {
    const box = el.getBoundingClientRect()

    return {
        top: box.top + window.pageYOffset - document.documentElement.clientTop,
        left: box.left + window.pageXOffset - document.documentElement.clientLeft
    }
}

元素相对父元素的偏移：

1
2
3
4
5
6
7
8
function getOffsetParent (el) {
    const box = el.getBoundingClientRect()

    return {
        top: box.top + window.pageYOffset - document.documentElement.clientTop,
        left: box.left + window.pageXOffset - document.documentElement.clientLeft
    }
}
------ 本文结束------
0%