Does not work in gatsby projects #154

soosap · 2020-01-09T22:20:04Z

In order to lock the scrolling in a gatsby project, the overflow: hidden style property must be set on the root <html style="overflow: hidden;"> element.

The text was updated successfully, but these errors were encountered:

iamskok · 2020-01-27T02:32:45Z

@soosap can you please provide more information on this issue?

kpratik2015 · 2020-02-18T17:19:33Z

Basically this isn't working on gatsby => enableBodyScroll(document.body); The body does get overflow hidden but the scrolling isn't stopped.

jamesirving · 2020-03-11T13:22:51Z

same issue here for my gatsby project... style="overflow: hidden;" is applied to the body element but this does not prevent scrolling.

diachedelic · 2020-03-12T22:54:55Z

I know nothing about Gatsby, but assuming gatsbyjs.org is developed using Gatsby, it forces the <html> element to scroll:

aidan-rypens · 2020-03-25T21:00:10Z

Someone made it work on gatsby?

diachedelic · 2020-03-25T21:41:45Z

@AidanRRR Can you try replacing all instances of document.body with document.documentElement in body-scroll-lock and see if that helps?

aidan-rypens · 2020-03-26T21:58:39Z

It works, thanks!

mdhornet90 · 2020-04-09T21:17:15Z

Confirmed this fixes my issue in a gatsby project as well, I have to hide overflow in the root in componentDidMount and delete that in componentWillUnmount. Any consideration for how this might still be incorporated into gatsby projects in a more general way?

diachedelic · 2020-04-09T23:18:03Z

@mdhornet90 by root do you mean the <html> element?

Are you sure you replaced the document.body on this line? It should apply overflow on the <html> element if you did.

mdhornet90 · 2020-04-12T19:25:46Z

Yes, I'm referring to the <html> element. I didn't want to modify the library in place or fork a custom version of BSL so this code:

  componentDidMount() {
    this.scrollRef = this.scrollRef || React.createRef();
    document.documentElement.style.overflow = 'hidden';
    disableBodyScroll(this.scrollRef.current);
  }

  componentWillUnmount() {
    clearAllBodyScrollLocks();
    document.documentElement.style.overflow = null;
  }

Does the trick for my specific situation (overlay that prevents scrolling of everything except the content of the overlay)

diachedelic · 2020-04-13T01:53:41Z

Well, perhaps we could restrict overflow of both <body> and <html>...can you think of any issues with this @willmcpo ?

kpratik2015 · 2020-04-15T14:46:48Z

I had to do this:

// for disabling
React.useEffect(() => {
    document.getElementsByTagName("html")[0].style.overflow = "hidden";
    disableBodyScroll(document.body);
  }, []);

// for enabling
React.useEffect(() => {
    enableBodyScroll(document.body);
    document.getElementsByTagName("html")[0].style = "";
  }, []);

WickyNilliams · 2020-12-01T13:56:35Z

I am not using gatsby, though I have noticed the same issues when doing SSR where disableBodyScroll is called on the server, and then enableBodyScroll on client.

When calling enableBodyScroll, this lib checks its previousBodyOverflowSetting and previousBodyPaddingRight variables to know what to revert to re-enabling scrolling. However those variables will never be set when the environment in which scrolling is disabled (the server doing SSR) is different to the environment where scrolling is enabled (the browser)

I imagine this issue is the same for gatsby, where scroll is disabled at build time, and enabled on the client.

I propose: instead of storing previous values in a variable, store in a data-* attribute on the body, since these will be persisted across server/client (or build-time/run-time). I have tested this locally and it seems to work. I can make a PR if you like

diachedelic · 2020-12-02T02:57:48Z

@WickyNilliams why is disableBodyScroll called in an SSR environment?

@lizy0329 A solution for this might be to change body-scroll-lock to prevent overflow on both document.body and document.documentElement. I don't have time to do that right now, but if anyone would like to try and test that approach then submit a PR that would be great!

WickyNilliams · 2020-12-08T08:51:15Z

@diachedelic excuse the delay, forgot to respond!

It's called in server because I may want to show a modal pre-opened on page load. I'm sure there are plenty of other use-cases besides.

In any case, whether calling at build-time (SSG) and server-side (SSR) the problem is the same - the assumption that enabling and disabling scrolling will always happen in the same environment

Hopefully I am making sense here :)

diachedelic · 2020-12-10T00:39:07Z

@WickyNilliams If I were you I would avoid locking the scroll in anything but a browser environment, as it just does not make sense to do so on the server. Is a way for you to determine which environment you are in?

WickyNilliams · 2020-12-10T08:48:32Z

@diachedelic shall i create a separate issue to discuss? I feel I am distracting from the original issue here (i misread originally, which is why i commented here, but this issue is not related to my question)...

I think there are valid reasons to call on the server, and from a dev perspective the less you have to special-case the server environment, the better. I have a few ideas in mind that could work that would be small changes, and backwards compatible.

diachedelic · 2020-12-10T22:55:15Z

@WickyNilliams Yes, this belongs in a seperate issue. But I think you need to understand that disableScrollLock adds event listeners etc, it does not just modify the DOM. It just does not make sense to call it in a server environment. You should call it immediately after "rehydration" if you need a modal to appear immediately.

hellodavecooper · 2021-03-31T18:13:34Z

I was also having this problem, in Gatsby v2.32.10, with body-scroll-lock v3.1.5. My requirement was to lock the scroll when a modal side-navigation "drawer" was open.

The solution in #154 (comment) improved the situation, but I also had to dynamically set the height style of the #gatsby-focus-wrapper div, like this:

  const [isOpen, setIsOpen] = useState(false); // represents the open state of the navigation drawer
  const headerEl = useRef();

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const gatsbyDiv = document.getElementById('gatsby-focus-wrapper');

    if (isOpen) {
      gatsbyDiv.style.height = '100%';
      document.documentElement.style.overflow = 'hidden';

      disableBodyScroll(headerEl.current);
    } else {
      gatsbyDiv.style.height = 'auto';
      document.documentElement.style.overflow = 'auto';

      enableBodyScroll(headerEl.current);
    }

    return clearAllBodyScrollLocks();
  }, [isOpen]);

yuittti · 2021-12-15T17:18:38Z

@hellodavecooper It's more likely there could be a potential issue with one part of your solution - you are setting overflow to auto on closing but auto isn't a default value of overflow and it has a little bit different behavior. I suggest setting overflow to visible as it is a default value of this property.

diachedelic mentioned this issue Jul 14, 2020

disableBodyScroll: content scrolls back to top #182

Closed

Robert-H-Leonard mentioned this issue Mar 7, 2021

Blocking scrolling that is added by gatsby ikenom/vendor-frontend#10

Merged

Jelkro mentioned this issue Apr 23, 2021

Stop page from scrolling when dragging organisms on mobile shockforestgroup/sfg-entity#23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does not work in gatsby projects #154

Does not work in gatsby projects #154

soosap commented Jan 9, 2020

iamskok commented Jan 27, 2020

kpratik2015 commented Feb 18, 2020

jamesirving commented Mar 11, 2020 •

edited

Loading

diachedelic commented Mar 12, 2020 •

edited

Loading

aidan-rypens commented Mar 25, 2020

diachedelic commented Mar 25, 2020

aidan-rypens commented Mar 26, 2020

mdhornet90 commented Apr 9, 2020

diachedelic commented Apr 9, 2020

mdhornet90 commented Apr 12, 2020 •

edited

Loading

diachedelic commented Apr 13, 2020

kpratik2015 commented Apr 15, 2020

WickyNilliams commented Dec 1, 2020 •

edited

Loading

diachedelic commented Dec 2, 2020

WickyNilliams commented Dec 8, 2020 •

edited

Loading

diachedelic commented Dec 10, 2020

WickyNilliams commented Dec 10, 2020

diachedelic commented Dec 10, 2020

hellodavecooper commented Mar 31, 2021

yuittti commented Dec 15, 2021 •

edited

Loading

Does not work in gatsby projects #154

Does not work in gatsby projects #154

Comments

soosap commented Jan 9, 2020

iamskok commented Jan 27, 2020

kpratik2015 commented Feb 18, 2020

jamesirving commented Mar 11, 2020 • edited Loading

diachedelic commented Mar 12, 2020 • edited Loading

aidan-rypens commented Mar 25, 2020

diachedelic commented Mar 25, 2020

aidan-rypens commented Mar 26, 2020

mdhornet90 commented Apr 9, 2020

diachedelic commented Apr 9, 2020

mdhornet90 commented Apr 12, 2020 • edited Loading

diachedelic commented Apr 13, 2020

kpratik2015 commented Apr 15, 2020

WickyNilliams commented Dec 1, 2020 • edited Loading

diachedelic commented Dec 2, 2020

WickyNilliams commented Dec 8, 2020 • edited Loading

diachedelic commented Dec 10, 2020

WickyNilliams commented Dec 10, 2020

diachedelic commented Dec 10, 2020

hellodavecooper commented Mar 31, 2021

yuittti commented Dec 15, 2021 • edited Loading

jamesirving commented Mar 11, 2020 •

edited

Loading

diachedelic commented Mar 12, 2020 •

edited

Loading

mdhornet90 commented Apr 12, 2020 •

edited

Loading

WickyNilliams commented Dec 1, 2020 •

edited

Loading

WickyNilliams commented Dec 8, 2020 •

edited

Loading

yuittti commented Dec 15, 2021 •

edited

Loading