Fix: Doesn't recognize scroll when html & body height are 100%

This commit is contained in:
SurajKhayamali
2020-06-11 19:56:15 +05:45
committed by Vishnu Ks
parent 40d8e36880
commit 98013de897

View File

@@ -1,19 +1,20 @@
import React, { useState, useEffect } from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import SEO from "../components/seo"
import BookCard from "../components/bookcard"
function myFunction(data, end, setEnd) {
if (document.documentElement.clientHeight+document.documentElement.scrollTop===document.documentElement.scrollHeight) {
setEnd(end+4)
function myFunction(setEnd, end) {
if (document.documentElement.clientHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight) {
setEnd(end+12)
}
}
export default ({data}) => {
let [end, setEnd] = useState(4);
let [end, setEnd] = useState(12);
useEffect(()=>{
window.document.onscroll = () => myFunction(data, end, setEnd);
window.document.onscroll = () => myFunction(setEnd, end);
})
return (
<Layout>
@@ -24,7 +25,9 @@ export default ({data}) => {
return (
<BookCard book={x.node} key={x.node.id} />
)
}
}else{
return null;
}
})}
</div>
</Layout>