disableBodyScroll: content scrolls back to top

[apolopena]

I am using React and the current scroll position is lost when disableBodyScroll is called. In other words when I disable scrolling using bodyScrollLock.disableBodyScroll the the content locks properly but it also autoscrolls back to the top of the page. I am using https://cdn.jsdelivr.net/npm/body-scroll-lock@3.0.3/lib/bodyScrollLock.min.js

I have recreated the issue on CodePen here. I am expecting the current scroll position to be preserved.

[mrlss]

Hello. Any updates regarding this issue? Experiencing same issue in static site project.

[diachedelic]

@mrlss are you using gatsby? more info here: https://github.com/willmcpo/body-scroll-lock/issues/154

[S4n3L]

I had the same issue, and I found a solution for it here: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

And here is how I implemented finally. I ended up not using the body-scroll-lock package at all because this solution worked me on IOS too. I never tested it on Android though.

When you open your modal:

if (isOpen) {
  document.querySelector("html").style.scrollBehavior = "unset"
  const tmpScrollY = window.scrollY
  setScrollPosition(window.scrollY)
  document.body.style.position = "fixed"
  document.body.style.top = `-${tmpScrollY}px`
}

And when you close it:

if (onClosed) { document.body.style.position = "" document.body.style.top = "" window.scrollTo(0, scrollPosition) document.querySelector("html").style.scrollBehavior = "smooth" setIsClosing(false) onClosed() }

The scroll behavior part only necessary if you have in-page routes/anchors you scrollTo, and you want to keep that behavior when the modal isn't open.

[alekslario]

Same issue here. Had to fallback to overscroll-behavior:contain that is supported by most modern browsers. It does has it's own quirks but at least it doesn't reset scroll position.

[reidterror]

I've been having the same issue. Running Nextjs with body-scroll-lock 3.0.3. my component is set up with ref forwarding.

import {disableBodyScroll, clearAllBodyScrollLocks} from 'body-scroll-lock';
let component2;
class Component1 extends Component {
    toggleComponent2 = () => {
        if (// logic to show element) {
            disableBodyScroll(component2);
        } else {
            cleraAllBodyScrollLocks();
        }
    }

    render() {
        return (
            <div forwardedRef={ref => component2 = ref}> content </div>
        )
    }
}

[jmikrut]

I am experiencing the same, with a custom non-SSR React app (no Next, no Gatsby). I feel like it wasn't always this way though and that this may have been introduced at some point over the last year.

Any update here?

[diachedelic]

@jmikrut could you please try reverting #189 and/or #199, and see if that fixes the issue?

[jmikrut]

@diachedelic you know what? I think my issue (and maybe others in this thread) was caused by CSS being applied to the html and / or body elements.

I had the following CSS in my app:

html {
  overflow-y: scroll;
}

html, body {
  height: 100%;
}

I removed them and the problem is gone. I suggest others in this thread check for similar results!

[jtomaszewski]

my issue (and maybe others in this thread) was caused by CSS being applied to the html and / or body elements. - https://github.com/willmcpo/body-scroll-lock/issues/182#issuecomment-699714361

Same here.

I guess body-scroll-lock could warn in the console if html / body elements has those styles on themselves. (Or alter the styles - by removing height: 100% if body is larger than the screen.)

[tiwuofficial]

I had the same problem with the latest version (4.0.0-beta.0).

By using ^3.1.5, this problem has been solved.

[mindnektar]

I've figured out what the problem is and made a pull request: https://github.com/willmcpo/body-scroll-lock/pull/228

[apolopena]

I had the same problem with the latest version (4.0.0-beta.0).

By using ^3.1.5, this problem has been solved.

This did not solve the problem for me in the chrome web browser

[apolopena]

I've figured out what the problem is and made a pull request: #228

Looks like this should solve this issue in a web browser as well?

[mindnektar]

I personally didn't have this issue in a web browser, and the setPositionFixed function will only be called for iOS devices.

[snax4a]

I confirm that downgrading to ^3.1.5 fixes this issue

[devsangwoo]

still have issue

[kfw9257]

still dealing with this issue even after downgrading. I was able to get it working using the solution @S4n3L provided.

[h-jennings]

Downgrading to @3.1.5 fixed this issue for me as well

[rick-liruixin]

They stopped maintenance. I had to work it out myself, using the same approach, with a new version of typeScript. And fix the original problem, available for everyone to use.

npm i body-scroll-lock-upgrade

[DevonRoepke]

They stopped maintenance. I had to work it out myself, using the same approach, with a new version of typeScript. And fix the original problem, available for everyone to use.

npm i body-scroll-lock-upgrade

Thank you for the fix! This worked for me.