search

willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.06k stars 339 forks source link

Fix width issue #262

Open joshuacurtiss opened 2 years ago

joshuacurtiss commented 2 years ago

Fixes #261. Details below! Thank you for this excellent project.

Adjustments to examples

I adjusted the samples to include traditional mobile responsive meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Then, I removed the left and right styles from the body tag in the examples as well, since websites using this library may not have those styles and we can't expect that they will be there.

Finally, I added some wide content that is wider than the page. This may be found, for instance, in pages with a carousel.

Fix

The fix is simple; just set the right style in addition to the top and left! Safari will no longer affect the width.

Ran the bundle scripts for the main code as well as the example bundles.

ghost commented 1 year ago

Hey, I think we encountered the same issue that this PR fixed.

We saw that setting right: 0px solved the issue when testing locally. However we cannot set the right 0px on our end, therefore we ended up setting body {width: 100%} to fix the issue.

Is there any known reason why this PR has not been approved?

Great package, thanks!

ghost commented 1 year ago

Is there any rough estimate for when this could be merged and released?🤞

deevanych commented 1 year ago

Is there any rough estimate for when this could be merged and released?🤞

I guess not 😔 2 years silence 😶

You can use https://github.com/tuax/tua-body-scroll-lock, i guess it will solve your problem (it solved mine)

rick-liruixin commented 1 year ago

They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log，Refer to the releases page.