Skip to content

Commit 7c0a42c

Browse files
ron0115ron0115
committed
feat: useScrollWatch hook to detect scroll event
1 parent 0deb1bd commit 7c0a42c

14 files changed

+6041
-420
lines changed

‎example/UseScrollWatch.stories.tsx

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import { useSmoothScroll, useScrollWatch } from 'react-smooth-scroll-hook';
2+
import React, { useRef } from 'react';
3+
4+
export const ScrollConatainerMode = () => {
5+
const ref = useRef<HTMLDivElement>(null);
6+
const { scrollTop, curIndex, curItem } = useScrollWatch({
7+
ref,
8+
list: [
9+
{
10+
href: '#item-0',
11+
},
12+
{
13+
href: '#item-10',
14+
},
15+
{
16+
href: '#item-20',
17+
},
18+
],
19+
offset: -10,
20+
});
21+
return (
22+
<>
23+
<h2>Scroll Container Mode</h2>
24+
<div>
25+
<p>
26+
<strong>scrollTop:</strong> {scrollTop}
27+
</p>
28+
<p>
29+
<strong>curIndex:</strong> {curIndex}
30+
</p>
31+
<p>
32+
<strong>curHref:</strong> {curItem?.href}
33+
</p>
34+
</div>
35+
<div
36+
style={{
37+
padding: '10px',
38+
maxHeight: '200px',
39+
overflowY: 'scroll',
40+
}}
41+
ref={ref}
42+
>
43+
{Array(100)
44+
.fill(null)
45+
.map((_item, i) => (
46+
<div key={i} id={`item-${i}`}>
47+
item-{i}
48+
</div>
49+
))}
50+
</div>
51+
</>
52+
);
53+
};
54+
55+
export const DirectionX = () => {
56+
const ref = useRef<HTMLDivElement>(null);
57+
const { scrollTop, curIndex, curItem } = useScrollWatch({
58+
ref,
59+
direction: 'x',
60+
list: [
61+
{
62+
href: '#x-item-0',
63+
},
64+
{
65+
href: '#x-item-10',
66+
},
67+
{
68+
href: '#x-item-20',
69+
},
70+
],
71+
offset: -10,
72+
});
73+
return (
74+
<>
75+
<h2>Direction x Mode</h2>
76+
<div>
77+
<p>
78+
<strong>scrollTop:</strong> {scrollTop}
79+
</p>
80+
<p>
81+
<strong>curIndex:</strong> {curIndex}
82+
</p>
83+
<p>
84+
<strong>curHref:</strong> {curItem?.href}
85+
</p>
86+
</div>
87+
<div
88+
style={{
89+
padding: '10px',
90+
maxHeight: '200px',
91+
overflowX: 'scroll',
92+
}}
93+
ref={ref}
94+
>
95+
<div
96+
style={{
97+
display: 'inline-flex',
98+
}}
99+
>
100+
{Array(50)
101+
.fill(null)
102+
.map((_item, i) => (
103+
<div
104+
key={i}
105+
id={`x-item-${i}`}
106+
style={{
107+
flexShrink: 0,
108+
padding: '10px',
109+
}}
110+
>
111+
x-item-{i}
112+
</div>
113+
))}
114+
</div>
115+
</div>
116+
</>
117+
);
118+
};
119+
120+
export const WindowMode = () => {
121+
const ref = useRef<HTMLElement>(document.documentElement);
122+
const { scrollTop, curIndex, curItem } = useScrollWatch({
123+
ref: ref,
124+
list: [
125+
{
126+
href: '#p-item-0',
127+
},
128+
{
129+
href: '#p-item-10',
130+
},
131+
{
132+
href: '#p-item-20',
133+
},
134+
],
135+
// offset: -10,
136+
});
137+
return (
138+
<>
139+
<h2>Window Parent Mode</h2>
140+
<div
141+
style={{
142+
padding: '10px',
143+
position: 'relative',
144+
}}
145+
// ref={ref}
146+
>
147+
{Array(21)
148+
.fill(null)
149+
.map((_item, i) => (
150+
<div key={i} id={`p-item-${i}`}>
151+
p-item-{i}
152+
</div>
153+
))}
154+
</div>
155+
<div
156+
style={{
157+
position: 'fixed',
158+
right: '0',
159+
top: '0',
160+
}}
161+
>
162+
<p>
163+
<strong>scrollTop:</strong> {scrollTop}
164+
</p>
165+
<p>
166+
<strong>curIndex:</strong> {curIndex}
167+
</p>
168+
<p>
169+
<strong>curHref:</strong> {curItem?.href}
170+
</p>
171+
</div>
172+
</>
173+
);
174+
};
175+
176+
export const UseScrollWatch = () => {
177+
return (
178+
<>
179+
<WindowMode />
180+
<ScrollConatainerMode />
181+
<DirectionX />
182+
</>
183+
);
184+
};

‎example/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import * as ReactDOM from "react-dom";
2-
import * as React from "react";
3-
import { Demo } from "./Demo.stories";
4-
import { DirectionX } from "./DirectionX.stories";
1+
import * as ReactDOM from 'react-dom';
2+
import * as React from 'react';
3+
import { Demo } from './Demo.stories';
4+
import { DirectionX } from './DirectionX.stories';
55
export default function App() {
66
return (
77
<div className="App">
@@ -14,4 +14,4 @@ export default function App() {
1414
);
1515
}
1616

17-
ReactDOM.render(<App />, document.getElementById("root"));
17+
ReactDOM.render(<App />, document.getElementById('root'));

‎example/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
"react": "16.13.1",
1212
"react-app-polyfill": "^1.0.0",
1313
"react-dom": "16.13.1",
14-
"react-smooth-scroll-hook": "1.2.0"
14+
"react-smooth-scroll-hook": "1.3.0"
15+
},
16+
"alias": {
17+
"react": "../node_modules/react",
18+
"react-dom": "../node_modules/react-dom"
1519
},
1620
"devDependencies": {
1721
"@types/react": "^16.9.11",

‎example/tsconfig.json

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111
"strictNullChecks": true,
1212
"preserveConstEnums": true,
1313
"sourceMap": true,
14-
"lib": [
15-
"es2015",
16-
"es2016",
17-
"dom"
18-
],
14+
"lib": ["es2015", "es2016", "dom"],
1915
"baseUrl": ".",
2016
"esModuleInterop": true,
21-
"allowSyntheticDefaultImports": true
17+
"allowSyntheticDefaultImports": true,
18+
"paths": {
19+
"react-smooth-scroll-hook": ["../src"]
20+
}
2221
}
23-
}
22+
}

0 commit comments

Comments
 (0)