Scrollbar Suddenly Not Showing Up

[Wenxi Chen]

I have a WebKit-based browser, and I've added a has-scrollbar class to certain containers, but the custom scrollbar isn't working anymore. Unsure of why this was happening because I recall it working before before (I can still see the scrollbar on 7.css's page). Is anyone else experiencing the same issue?

For reference I have it added as a class of an article tag:

<article class="has-scrollbar" hidden id="art" role="tabpanel" style="margin-bottom: 0">
...
</article>

I wonder if it's because I'm using an article tag instead of a div tag? Is there another way to have the scrollbar show up for articles? Thanks.

[Khang]

Hey, I can't really help without further context. Would be helpful if you could elaborate more on "custom scrollbar isn't working anymore", e.g. does the default scrollbar appear in place of the custom one? or there's no scrollbar whatsoever? is the scroll region scrollable as expected...

And even better, the code piece that has the issue to be looked into 🙂

[Wenxi Chen]

Hi, sorry for the vagueness in the initial post! I should have provided more context.

The default scrollbar appears in place of the custom one. The scroll region is scrollable as expected. On a separate part of the site, the scrollbar works as intended when "has-scrollbar" is added as a class to a div tag, like in the guide:

<div class="has-scrollbar" style="width: 300px; height: 150px; overflow: auto">
  Lorem ipsum dolor sit amet...
</div>

For this particular scenario, though, I have a container with tags, so something more like:

<div class="window-body has-space">
                <menu aria-label="Window with Tabs" role="tablist">
                    <button aria-controls="introduction" aria-selected="true" role="tab">Intro</button>
                    <button aria-controls="research" role="tab">Research</button>
                    <button aria-controls="art" role="tab">Art</button>
                </menu>
                <article class="has-scrollbar" id="introduction" role="tabpanel" style="margin-bottom: 0">
                    [intro text]
                </article>
                <article class="has-scrollbar" hidden id="research" role="tabpanel" style="margin-bottom: 0">
                    [research text]
                </article>

                <article class="has-scrollbar" hidden id="art" role="tabpanel" style="margin-bottom: 0">
                    [art text]
                </article>
</div>

What does work is adding a "has-scrollbar" class to the parent div, but then we end up with something like this:

Where the scrollbar shows up, but when there isn't a scroll needed (like for Intro) there is a container for it, and when there is a scroll needed, it's outside the article container.

I'd appreciate being able to have something like this instead:

Which I tried to execute with the initial code (second codeblock in this post), but it didn't work (only the default scrollbar shows up).

Let me know if you need any additional information, and I really appreciate you looking at this.

[Khang]

I made a minimal CodeSandbox based on what you've provided and the scrollbar shows up still.

Can you have a look and check with your code to see if anything is missing?

[Wenxi Chen]

Ah, this helped me figure it out! I had applied "overflow: scroll" to the "window-body" class at some point, which made the default scrollbar show up as it was scrolling on the outer window body and not the inner article.

Thank you so much for helping me take a look at this and sorry for the trouble.