Use scroll hook
This commit is contained in:
parent
194668317f
commit
6c157019ea
@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
|
|||||||
import { NoteCreator } from "../element/NoteCreator";
|
import { NoteCreator } from "../element/NoteCreator";
|
||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import useScroll from "../useScroll";
|
||||||
|
|
||||||
const RootTab = {
|
const RootTab = {
|
||||||
Follows: 0,
|
Follows: 0,
|
||||||
@ -13,6 +14,7 @@ const RootTab = {
|
|||||||
export default function RootPage() {
|
export default function RootPage() {
|
||||||
const [loggedOut, pubKey, follows] = useSelector(s => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
|
const [loggedOut, pubKey, follows] = useSelector(s => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
|
||||||
const [tab, setTab] = useState(RootTab.Follows);
|
const [tab, setTab] = useState(RootTab.Follows);
|
||||||
|
const [eop] = useScroll();
|
||||||
|
|
||||||
function followHints() {
|
function followHints() {
|
||||||
if (follows?.length === 0 && pubKey) {
|
if (follows?.length === 0 && pubKey) {
|
||||||
|
26
src/useScroll.js
Normal file
26
src/useScroll.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export default function useScroll() {
|
||||||
|
const [eop, setEop] = useState(false);
|
||||||
|
|
||||||
|
function handleScroll(e) {
|
||||||
|
let target = e.path[1];
|
||||||
|
let y = target.scrollY + target.innerHeight;
|
||||||
|
let h = e.target.scrollingElement.offsetHeight;
|
||||||
|
let padding = 10;
|
||||||
|
let atEnd = y + padding >= h;
|
||||||
|
setEop((s) => {
|
||||||
|
if (s !== atEnd) {
|
||||||
|
return atEnd;
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return [eop];
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user