Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit96ef687

Browse files
committed
detect page bottom
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parentaa2a750 commit96ef687

File tree

3 files changed

+50
-4
lines changed

3 files changed

+50
-4
lines changed

‎web-app/src/containers/Tutorial/components/Level.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const styles = {
1515
display:'flex'as'flex',
1616
flexDirection:'column'as'column',
1717
padding:0,
18-
paddingBottom:'5rem',
1918
},
2019

2120
text:{

‎web-app/src/containers/Tutorial/components/ScrollContent.tsx

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,70 @@
11
import*asReactfrom'react'
22

3+
conststyles={
4+
scrollIndicator:{
5+
position:'fixed'as'fixed',
6+
bottom:'2rem',
7+
},
8+
}
9+
310
typeProps={
411
item:string
512
children:React.ReactElement
613
}
714

815
constScrollContent=({ item, children}:Props)=>{
16+
const[showScrollIndicator,setShowScrollIndicator]=React.useState(false)
917
constpageTopRef:React.RefObject<any>=React.useRef(null)
10-
1118
constpageBottomRef:React.RefObject<any>=React.useRef(null)
1219

1320
constscrollToTop=()=>{
1421
pageTopRef.current.scrollIntoView({behavior:'smooth'})
22+
lethideTimeout:any
23+
24+
// API to detect if an HTML element is in the viewport
25+
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
26+
constobserver=newIntersectionObserver(
27+
([entry])=>{
28+
// show a scroll indicator to let the user know
29+
// they can scroll down for more
30+
constisVisible=!entry.isIntersecting
31+
setShowScrollIndicator(isVisible)
32+
if(!isVisible){
33+
hideTimeout=setTimeout(()=>{
34+
setShowScrollIndicator(false)
35+
},3000)
36+
}
37+
},
38+
{
39+
rootMargin:'0px',
40+
},
41+
)
42+
43+
constshowTimeout=setTimeout(()=>{
44+
// detect if bottom of page is visible
45+
46+
if(pageBottomRef.current){
47+
observer.observe(pageBottomRef.current)
48+
}
49+
},300)
50+
return()=>{
51+
// cleanup timeouts & subs
52+
observer.unobserve(pageBottomRef.current)
53+
clearTimeout(showTimeout)
54+
clearTimeout(hideTimeout)
55+
}
1556
}
1657

1758
React.useEffect(scrollToTop,[item])
1859

60+
console.log(`showScrollIndicator =${showScrollIndicator}`)
61+
1962
return(
2063
<>
2164
<divref={pageTopRef}/>
2265
{children}
23-
<divref={pageBottomRef}/>
66+
{showScrollIndicator ?<divstyle={styles.scrollIndicator}>MORE</div> :null}
67+
<divref={pageBottomRef}>BOTTOM</div>
2468
</>
2569
)
2670
}

‎web-app/src/containers/Tutorial/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ import Continue from './components/Continue'
1616
importScrollContentfrom'./components/ScrollContent'
1717

1818
conststyles={
19+
page:{
20+
paddingBottom:'5rem',
21+
},
1922
header:{
2023
display:'flex'as'flex',
2124
alignItems:'center',
@@ -113,7 +116,7 @@ const TutorialPage = (props: PageProps) => {
113116

114117
return(
115118
<div>
116-
<div>
119+
<divcss={styles.page}>
117120
<divcss={styles.header}>
118121
<aonClick={()=>setMenuVisible(!menuVisible)}>
119122
<Icontype="toggle-left"size="small"style={{color:'#333'}}/>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp