Up next in 10
Build a React Scroll Locked Modal Window With react-remove-scroll to Prevent Background Scrolling
887 views
Jun 3, 2025
Get the full source code of application here:
View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a react
0:04
chase package which will prevent
0:06
background scroll scrolling it will only
0:09
scroll the content which is there inside
0:11
the model window it will not scroll the
0:14
outside content such as the background
0:16
scrolling will not go on so there is a
0:18
package inside this ReactJS which is
0:20
react remove scroll let me show you the
0:23
output here what you will be seeing at
0:26
the end of this video
0:29
let me just run this ReactJS application
0:31
so there will be this button right here
0:33
if you see open model as I click this
0:35
button you will see a model window will
0:38
open and
0:43
uh as you can see the model window has
0:46
opened and this will be the progress uh
0:48
scroll bar which will be attached to the
0:50
scrollable model so you will see
0:52
scrollable model will be there and the
0:54
progress bar and this uh scroll bar will
0:58
be attached to it so no more background
1:01
scrolling will not be there so you will
1:03
be able to scroll the content of the
1:05
model window so if you click close the
1:09
model window will close like this so
1:11
there is a package here for making these
1:14
scrollable models inside ReactJS which
1:17
is react
1:25
remove scroll this is actually the
1:28
package
1:32
here simply search for it and uh simply
1:36
install this
1:38
so the command is simple i've already
1:42
installed
1:43
it so now to get started it's really
1:46
easy simply create a simple functional
1:49
component and first of all you just need
1:51
to require this package by using the
1:53
import statement so we simply say
1:56
import remove scroll we need to actually
2:01
import this method from this package
2:04
react remove scroll after we import this
2:08
now we just need to actually declare a
2:11
variable for the
2:14
scrolling is open set is open so this
2:19
will be a boolean
2:21
parameter initial value will be false
2:29
and right here we will actually have a
2:39
button we will have an button here open
2:43
model so when we click this button of
2:47
open model we will make this set is open
2:50
from false to true set is open from
2:53
false to true so we will just have a
2:57
button right here if you see open model
3:00
so as we click it we make the value from
3:02
false to true so now when it becomes
3:05
true then we put a condition right here
3:07
that if it's open it's true then in that
3:10
case we need to simply use this
3:13
component which is remove
3:17
scroll and inside this we need to
3:20
specify if fixed position for the model
3:24
window and for this we simply say
3:33
div now here you can specify a custom
3:37
CSS properties here to style your model
3:42
window so this is not related to the
3:44
video so you can just write any sort of
3:46
CSS properties i pasted
3:57
this as you can see this will open and
4:00
now you can define some content from the
4:02
model window such as some H2 elements so
4:06
I will
4:14
simply so something like this and lastly
4:17
we can actually have a button
4:21
to close the
4:23
model so again we'll make the is open
4:27
from true to false again to close it
4:32
so if I click the close model the model
4:36
will close but uh as you can see uh the
4:39
background scrolling is not going on
4:41
because we are only scrolling the
4:43
content of the model window the
4:45
background scrolling is not going on so
4:47
this is the use of this module which is
4:50
designed in such a way that only the
4:53
content inside the model windows are
4:55
scrolling rest of the content the
4:57
background content is not scrolling so
5:01
this is built to prevent background
5:04
scrolling so you can use this package to
5:08
get started guys you simply require this
5:11
package the remove scroll method after
5:14
you define the boolean parameter then
5:17
you define your model
5:19
window by using this component remove
5:23
scroll you just need to make sure that
5:24
you define your model window inside this
5:26
component remove
5:28
scroll and that's all so thank you very
5:32
much for watching this video and uh also
5:35
check out my website freemediadtools.com
5:39
uh which contains thousands of tools