Kevin Powell - Community•2w ago

how to prevent scroll on ios device

Hi guys, I want to prevent scroll when I open a modal. I try to use overflow:hidden.It works on browser and android device but It does not work on IOS device. You can take a look on the image, when I focus in the input of header and I try to scroll, it's still scrollable. I also try to use position: fixed, it works but it will be scrolled to top automactically. I also try to use JS to prevent scroll behavior but in inside my modal. There is a scrollable section, so it disables my section too. How can I handle this problem? Thank you

function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.addEventListener('touchmove', preventDefault, wheelOpt); 
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.addEventListener('touchmove', preventDefault, wheelOpt); 
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

29 Replies

ἔρως•2w ago

body:has(dialog[open]) { overflow: none; } you may change body for html, depending on your styles by the way, if you do this, you have to implement scrolling in the dialog

emptyOP•2w ago

I tried to use overflow:hidden but it does not work on ios device. When I focus on the input of the header and it's still scrollable

ἔρως•2w ago

something has to give for the input to be visible would be an extremely poor experience if it didn't move enough to be in the visible area but it's also possible that it is a bug

emptyOP•2w ago

Sorry, I does not describe the problem clearly. When I open the modal, I want the header is visible. So that is the reason why when the modal open, user can focus on the input and scrolling

ἔρως•2w ago

alright, how about you take screenshots of what's happening? i don't have any ios devices, so, can't test it by the way, is the dialog in the body?

emptyOP•2w ago

let me try to make a video yes, it is in the body. But it's nested inside a lot of div

ἔρως•2w ago

remove it from the divs, and put it in the body directly i've had weird issues with dialogs when they weren't directly in the body

emptyOP•2w ago

It's hard for me to move the modal outside. It's used to display google map. On desktop, It will be displayed on screen by default but on mobile devices, it will be a modal so users can toggle to open or close it

ἔρως•2w ago

then move it in js, before you open the dialog i very strongly recommend that you move it by ANY means necessary

emptyOP•2w ago

Ok, I will try. But the problem is the body is still scrollable when I focus on the input. So I think it can not fix the problem. I'm trying to make a video about the bug

ἔρως•2w ago

moving the dialog to the body isn't to fix this issue it's to prevent weird bugs how are you opening the dialog?

emptyOP•2w ago

Here is the bug. You can see when I focus on the input, I can scroll even if I set overflow:hidden I click on a button and add class to change the style to fixed

ἔρως•2w ago

you're doing it super wrong that's worse than setting the open attribute here's a plan for you: - move the dialog to the body - open the dialog with .showModal() - add body:has(> dialog[open]) { overflow: none; } to the css

emptyOP•2w ago

I use a div for a modal. So you mean I should use you a dialog element?

ἔρως•2w ago

oh, right, you want to show a "dialog" on phones but want to show the contents for desktop

emptyOP•2w ago

yeah

ἔρως•2w ago

i hate the div approach, but it seems to be the most sensible do you set a class to the "dialog"? to show it?

emptyOP•2w ago

yes. I add a class to change the position to fixed

ἔρως•2w ago

alright, what's the dialog classes when it's open, and which class is the one that opens it?

emptyOP•2w ago

.open-map{
    position: fixed;
    inset:0;
    z-index: 15;
}

.open-map{
    position: fixed;
    inset:0;
    z-index: 15;
}

ἔρως•2w ago

and what's the dialog class?

emptyOP•2w ago

class="flex-1 z-10 relative xl:max-h-[1050px] overflow-hidden 2xl:max-w-[60%] lg:block hidden" I use tailwind. So basically, it contains some classes like this

ἔρως•2w ago

🤢 tailwind ... yeah, you need to add a new class to that actually body:has(.open-map) { overflow: none; } that should do it

emptyOP•2w ago

https://jsbin.com/gakacuxiki/edit?html,css,output you can take a look at my code here. As I try, the bug does not happen on browers or andoirds devices. But still happens on ios when I focus on input or sometimes zoom in the screen If you want to test please use this link https://output.jsbin.com/gakacuxiki

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

ἔρως•2w ago

the js is all gone and the css seems to be all cooked up

emptyOP•2w ago

here is the code: https://jsbin.com/dixokil/edit?html,css,output You can click at this icon to get a link to preview on your phone or use this link: https://output.jsbin.com/dixokil

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

emptyOP•2w ago

I don't use any JS code. Because I just want to simulate the bug happens when I open the modal

clevermissfox•2w ago

Maybe im misunderstanding whats going on but using .showModal() to open the dialog renders anything outside of it inert, so you can't scroll anything in the body or interact with buttons etc. Basically everything covered by the ::backdrop. I would use a template with the contents , and then use javascript to either put those contents in a dialog foe mobile or in whatever div in your layout for desktop.

ἔρως•2w ago

it's not a dialog, it's a div pretending to be a dialog okay, instead of using body, use html as well since you are using css nesting, you can do :is(body, html):has(.open-map) or just html, body{ &:has(.open-map){...}}

Gaming

Programming

how to prevent scroll on ios device