Scroll load data on the moving side to determine whether to scroll to the bottom of the page

Get the scrollTop, which is the distance between the top of the visible window and the top of the body object, the hidden page height (the distance to scroll) when you scroll the mouse or finger across the page.

DocumentElement corresponds to html tag, body corresponds to body tag, under standard w3c,Document.body.scrollTopConstant to zero, need to useDocumnet.documentElement.scrollTopInstead, only one of them works, and one is always zero.

  function getScrollTop () {
    // Due to browser version compatibility issues, the resolution may be different
  return document.documentElement.scrollTop || document.body.scrollTop
}

Get Viewport Height (Visible Area Height of Web Page)

function getWinHeight () {
  // Browser Visible Content Height||Browser All Content Height (due to browser version compatibility issues, the resolution may be different)
  return document.documentElement.clientHeight || document.body.clientHeight
}

Get the total height of the document

function getScrollHeight() {
  let bodyScrollHeight = 0
  let documentScrollHeight = 0
  if (document.body) {
    bodyScrollHeight = document.body.scrollHeight
  }
  if (document.documentElement) {
    documentScrollHeight = document.documentElement.scrollHeight
  }
  // When the page content exceeds the size of the browser's viewable window, Html Height Include body height+margin+padding+border therefore html Height may be greater than body height
  return (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
}

Scroll to the bottom

function isReachBottom () {
  const scrollTop = getScrollTop() // Get the height of the scrollbar
  const winHeight = getWinHeight() // Height of one screen
  const scrollHeight = getScrollHeight() // Get the total height of the document
  return scrollTop >= parseInt(scrollHeight) - winHeight
}

derived function

export default isReachBottom

Using functions

// Determine whether to go to the bottom of the page, if to the bottom of the page, whether there is data, if there is data, load, if not, unbind scrolling events
import isReachBottom from 'isReachBottom'

methods: {
  reachBottom() {
    if (isReachBottom()) {
      if (this.hasMore) {
        this.queryInfo()
      } else {
        window.onscroll = null
      }
    }
  }
}
watch: {
  // Determine if a page needs to slide to load data
  investShow() {
    // Bind reachBottom event if you need to slide pages that load data
    window.addEventListener("scroll", this.reachBottom)
  } else {
    // Otherwise remove
    window.removeEventListener("scroll", this.reachBottom)
  }
}

Posted on Sun, 05 Jul 2020 12:14:42 -0400 by rocket