美文网首页
监听页面滚动到底部

监听页面滚动到底部

作者: anefish | 来源:发表于2017-11-14 20:44 被阅读0次
  1. 监听document
        document.onscroll = () => {
          if (document.documentElement.clientHeight
            + (document.documentElement.scrollTop || document.body.scrollTop)
            === document.documentElement.offsetHeight) {
            // do something
          }
        }
  1. 监听container
.container {
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    width: auto;
    left: 0;
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* 兼容webkit滚动卡顿问题 */
}
  <div class="container">
    <div class="content">
    </div>
  </div>
        const container = document.getElementsByClassName('container')[0]
        const content = document.getElementsByClassName('content')[0]

        container.onscroll = () => {
          if (container.clientHeight + container.scrollTop === content.offsetHeight) {
            // do something
          }
        }

需要注意的是: absolute在ios上面有兼容性问题

相关文章

网友评论

      本文标题:监听页面滚动到底部

      本文链接:https://www.haomeiwen.com/subject/rytqvxtx.html