Is it possible to target html instead of body with overflow: hidden?

[Hlsgs]

All sorts of issues arise when scrolling with body instead of html, especially in Firefox. For example, if one wishes to always show the vertical scrollbar, one must set overflow-y: scroll on html else FF will display two scrollbars. Also, position: fixed elements overlay the scrollbar on the body element.

[chrishale]

I needed to use overlfow-x: hidden on my html element for Safari, for some reason applying to the body didn't work.

One possible way round this would be to create a small wrapper for this lib:

import * as bodyScrollLock from "body-scroll-lock";

const ENABLE_BODY_SCROLL = "enableBodyScroll";
const DISABLE_BODY_SCROLL = "disableBodyScroll";

export const enableBodyScroll = $node =>
  $node.dispatchEvent(new CustomEvent(ENABLE_BODY_SCROLL, { bubbles: true }));

export const disableBodyScroll = $node =>
  $node.dispatchEvent(new CustomEvent(DISABLE_BODY_SCROLL, { bubbles: true }));

const updateDocumentElement = () => {
  const locked = document.body.style.overflow == "hidden";
  document.documentElement.style.overflowY = locked ? "hidden" : "scroll";
};
document.addEventListener(ENABLE_BODY_SCROLL, ({ target }) => {
  bodyScrollLock.enableBodyScroll(target);
  setTimeout(updateDocumentElement, 0);
});

document.addEventListener(DISABLE_BODY_SCROLL, ({ target }) => {
  bodyScrollLock.disableBodyScroll(target);
  setTimeout(updateDocumentElement, 0);
});

Easy enough to drop in a js file and import from that instead of body-scroll-lock;

I guess you could also provide options through the CustomEvent's detail object.

[jamesjsewell]

@chrishale gonna try this out, hopefully it remains compatible? as long as it works with the current version i should be fine. Would be nice if this was added to the code base as an option

[jamesjsewell]

@chrishale your solution is working beautifully so far, not sure what it would take to get that in the codebase of this repo. i've been pulling my hair out trying other peoples solutions but none of them were addressing the html scroll issue. Thanks a million!
EDIT: im using bulma css framework with react BTW, i noticed bulma is adding some overflow visible stuff to the html tag i think?

[jamesjsewell]

also a different project ( static html site ) im using the cdn, what should i do in this case? same issue where the scrollable element is the html and not the body. in this case since it's a static site should i be able to set the scrollable element to the body?