-
Notifications
You must be signed in to change notification settings - Fork 1k
Use body instead of html to block overflow #1117
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Hi @brendon, thanks for your PR. |
DanielRuf
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So $html is just used in the scrollbar check.
Can you cleanup the unused variable?
Also this could be a breaking change.
|
Hi @DanielRuf, I'll sort those changes for you. This will be my first (that I can recall) unit test in javascript. Would you be able to help by pointing me at an appropriate place in the current tests where I should put this test (if there's any existing testing around scroll prevention (I couldn't find any))? If you're worried about it being a breaking change then we could approach it in a different manner where we make it an option that can be turned off (i.e. don't prevent scrolling). In my case the picker is showing up on a form that's already in a modal so all of that work has been done by the modal. The third option could be to allow the element itself to be defined by the user (e.g. either the html tag or body etc...) Let me know which way you think is best. |
|
I've done some more testing to work out why the code is failing in my particular situation and that's because semantic-ui modal (that I use) sets overflow: hidden on the body tag already, and then setting overflow: hidden on html after this scrolls us to the top of the page. Consensus seems to be to set it on the body tag and not the html tag, though I note one person mentions that this still allows scrolling for iOS though I haven't tested that. I'll wait on your opinion of the best way to work around this and then get to work on the code. :) |
|
Ok, I have a working codepen. You need to use Chrome to trigger the issue: https://codepen.io/brendon-the-animator/pen/pQKWrM First scroll down, then click the button to set Regarding a unit test, this is difficult because it's a browser-specific behaviour. I couldn't get it to reliably test out. |
Isn't this a browserbug then? We should not fix bugs in browsers. |
|
Shouldn't we do our best to avoid the bug though? Setting |
|
If you look at Bootstrap's modal, you'll see they too set https://getbootstrap.com/docs/4.0/components/modal/#live-demo |
|
Let's try this and see if we can test it with a unit test (using |
|
Thanks @DanielRuf, this is how far I got: |
|
@brendon awesome, this looks great so far! Can you open a new (WIP) PR for this? I'll do a review when it is ready to merge. I'll check the docs then if we havd to update something or mention this change somewhere. |
|
Hi @DanielRuf, would you mind doing a new release? |
|
Hi @DanielRuf, sorry to bump this, but would it be possible to do a new release so I can stop using GitHub for my yarn source for this project? :) |
|
Hi @brendon, can you create a new issue for this? I would coordinate and plan the new release there. But keep in mind that we are currently working on v5. |
|
Thanks @DanielRuf, will do :) |
In my case (and others have had trouble with this), setting
html'soverflow: hiddencauses the page to scroll to the top. I'm using a custom container for the picker (a child of thebodytag).Setting
overflow: hiddenon the body tag instead prevents the scrolling.Closes #769
Once this is merged, would we be able to get another version release? :)