Prevent BODY from scrolling when modal is opened AND input is focused

Asked Apr 19 '16 at 07:52

Active Apr 19 '16 at 07:52

Viewed 53 times

Similar question to this one here:

Prevent BODY from scrolling when a modal is opened

.modal{
-webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

body.modal--open{
overflow:hidden;
}

The above CSS works fine, but the problem is when the user focuses on an input field within the modal the body scrolls again. Is there something that can be done to prevent this? Thanks!

edited May 23 '17 at 12:07

Community

asked Apr 19 '16 at 07:52

user1937021

10,151
22
81
143

1

Maybe move modal--open to root? `html, body {margin: 0; height: 100%; overflow: hidden}` – Andy Hoffman Apr 19 '16 at 08:01
actually that did work! if you apply to both html and body! – user1937021 Apr 19 '16 at 08:16
Excellent! If you don't mind, please upvote my comment containing the answer. – Andy Hoffman Apr 19 '16 at 08:26
Remove overflow:hidden and try adding position:fixed – Santhosh Kumar Apr 19 '16 at 09:15

Prevent BODY from scrolling when modal is opened AND input is focused

0 Answers0