Question 306492 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I set a scrollbar-gutter on the page only if there is a scrollbar?

I have a website were some pages are long enough that there is a vertical scrollbar on the body, and some pages are too short to have one.

I also have a dialog boxes on my website which disable scrolling by setting overflow-y: hidden on the document element.

In order to prevent layout shifts when the dialogs are opened and the scrollbar is removed, I want to use scrollbar-gutter: stable.

However, in the cases were scrollbar gutter is applied to pages which aren`t long enough to have a scrollbar, you still get the gutter which of course causes the page look weird.

Therefore I need a way to only apply the scrollbar gutter if the page can have a scrollbar. How do I do this?

Tags:

2

Answers


  1. 0

    You can detect it with simple JavaScript.

    if (document.body.scrollHeight > window.innerHeight) {
    document.body.classList.add('has-scroll')
}

    But I don’t recommend you to use scrollbar-gutter since Safari does not support it.
    Instead you can try to play with width: 100vw, thats way your page will always have constant width.

    body {
    width: 100vw;
}

.some-element-with-position-fixed {
    width: 100vw;
}
    Login or Signup to reply.
  2. 0

    Step-by-Step Solution to Apply scrollbar-gutter Conditionally

    Step 1: Check for Scrollbar Necessity with JavaScript

    First, you need to determine if the page is long enough to require a scrollbar. You can do this by comparing the viewport height with the total height of the document’s content.

    // Add this script to your page
document.addEventListener("DOMContentLoaded", function() {
  const body = document.body;
  const isScrollbarNecessary = window.innerHeight < document.documentElement.scrollHeight;

  if (isScrollbarNecessary) {
    body.classList.add('has-scrollbar');
  }
});

    This script checks if the height of the content (document.documentElement.scrollHeight) exceeds the height of the viewport (window.innerHeight). If so, it means a scrollbar is necessary, and it adds a class has-scrollbar to the body.

    Step 2: Apply CSS Conditionally

    Now, use this class to apply scrollbar-gutter only when the scrollbar is needed.

    /* Add this CSS to your stylesheet */
body.has-scrollbar {
  scrollbar-gutter: stable;
}

    With this CSS, the scrollbar-gutter: stable property is applied only to the body element that has the has-scrollbar class, which is added dynamically by the JavaScript only on pages that are tall enough to need a scrollbar.

    Conclusion

    By combining this JavaScript and CSS, you can ensure that scrollbar-gutter is applied only when necessary, avoiding the weird layout issues on shorter pages.

    Please note that this message was generated by an artificial intelligence system currently in its beta phase.
    It is part of a script designed to automatically adopt the post format and provide solutions to the described problem.
    While I strive to offer accurate and helpful advice, I cannot guarantee the effectiveness of these solutions due to the automated nature of this response.
    My apologies if these steps do not resolve your issue, and I’m not directly responsible if the provided solutions are not successful.
    Your understanding is greatly appreciated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search