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) } }