Skip to content

Commit 11b3a97

Browse files
streamichstreamich
committed
feat: 🎸 prevent window scroll under <Overlay>
1 parent 7e3d7f0 commit 11b3a97

File tree

3 files changed

+159
-1
lines changed

3 files changed

+159
-1
lines changed

‎src/Modal/__story__/story.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,152 @@ storiesOf('UI/Modal', module)
7575
}</Toggle>
7676
</div>
7777
)
78+
.add('Page scroll', () =>
79+
<div>
80+
This is page content
81+
<br/>
82+
This is page content
83+
<br/>
84+
This is page content
85+
<br/>
86+
<Toggle>{({on, toggle}) =>
87+
<div>
88+
<button onClick={toggle}>Open dialog</button>
89+
{on && <Modal color='rgba(0,0,0,.3)' onClick={toggle} onEsc={toggle}>
90+
<div
91+
style={{
92+
width: 300,
93+
height: 200,
94+
background: '#fff',
95+
borderRadius: 4,
96+
boxShadow: '0 2px 4px rgba(0,0,0,.3)',
97+
padding: 30,
98+
}}
99+
>
100+
foobar
101+
</div>
102+
</Modal>}
103+
</div>
104+
}</Toggle>
105+
This is page content
106+
<br/>
107+
This is page content
108+
<br/>
109+
This is page content
110+
<br/>
111+
This is page content
112+
<br/>
113+
This is page content
114+
<br/>
115+
This is page content
116+
<br/>
117+
This is page content
118+
<br/>
119+
This is page content
120+
<br/>
121+
This is page content
122+
<br/>
123+
This is page content
124+
<br/>
125+
This is page content
126+
<br/>
127+
This is page content
128+
<br/>
129+
This is page content
130+
<br/>
131+
This is page content
132+
<br/>
133+
This is page content
134+
<br/>
135+
This is page content
136+
<br/>
137+
This is page content
138+
<br/>
139+
This is page content
140+
<br/>
141+
This is page content
142+
<br/>
143+
This is page content
144+
<br/>
145+
This is page content
146+
<br/>
147+
This is page content
148+
<br/>
149+
This is page content
150+
<br/>
151+
This is page content
152+
<br/>
153+
This is page content
154+
<br/>
155+
This is page content
156+
<br/>
157+
This is page content
158+
<br/>
159+
This is page content
160+
<br/>
161+
This is page content
162+
<br/>
163+
This is page content
164+
<br/>
165+
This is page content
166+
<br/>
167+
This is page content
168+
<br/>
169+
This is page content
170+
<br/>
171+
This is page content
172+
<br/>
173+
This is page content
174+
<br/>
175+
This is page content
176+
<br/>
177+
This is page content
178+
<br/>
179+
This is page content
180+
<br/>
181+
This is page content
182+
<br/>
183+
This is page content
184+
<br/>
185+
This is page content
186+
<br/>
187+
This is page content
188+
<br/>
189+
This is page content
190+
<br/>
191+
This is page content
192+
<br/>
193+
This is page content
194+
<br/>
195+
This is page content
196+
<br/>
197+
This is page content
198+
<br/>
199+
This is page content
200+
<br/>
201+
This is page content
202+
<br/>
203+
This is page content
204+
<br/>
205+
This is page content
206+
<br/>
207+
This is page content
208+
<br/>
209+
This is page content
210+
<br/>
211+
This is page content
212+
<br/>
213+
This is page content
214+
<br/>
215+
This is page content
216+
<br/>
217+
This is page content
218+
<br/>
219+
This is page content
220+
<br/>
221+
This is page content
222+
<br/>
223+
This is page content
224+
<br/>
225+
</div>
226+
)

‎src/Modal/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {h, isClient, on, off, noop} from '../util';
55
import {Overlay, IOverlayProps} from '../Overlay';
66

77
let id = 0;
8-
98
const ESC = 27;
109

1110
export interface IModalProps extends IOverlayProps {

‎src/Overlay/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import {Component} from 'react';
22
import {Portal} from '../Portal';
33
import {h, noop, on, off} from '../util';
4+
import {rule} from '../nano';
5+
6+
const classNameBodyNoScroll = rule({
7+
overflow: 'hidden',
8+
}).trim();
49

510
export interface IOverlayProps {
611
color?: string;
@@ -20,8 +25,13 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
2025
time: 300,
2126
};
2227

28+
componentDidMount () {
29+
document.body.classList.add(classNameBodyNoScroll);
30+
}
31+
2332
componentWillUnmount () {
2433
off(this.el, 'click', this.onClick);
34+
document.body.classList.remove(classNameBodyNoScroll);
2535
}
2636

2737
onElement = (el) => {

0 commit comments

Comments
 (0)