Member Avatar for jspence29

I have a one page website I am using anchors and targets, I am using overflow-y: auto; but the scroll bar only displays when the screen is big enough, so it works on my 1920 by 1080 desktop, but not on an average size laptop, how do I make it so that it is always there? The problem is on the episode guyide tab

  • 4 Contributors
  • 4 Replies
  • 128 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gauravkumaralwar

Dani AI

Generated

This problem usually comes down to two things: the page (or a specific container) does not actually need to scroll in some viewports, or the OS/browser is using “overlay” scrollbars that hide until you interact. has a scroll rule in place; saw a scrollbar in their test while did not on a laptop Chrome build — that pattern points to environment and CSS differences rather than a single HTML bug.

A simple, cross-browser-first fix is to force a stable vertical gutter and make the document/container always render a vertical track:

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

overflow-y: scroll forces the vertical track; scrollbar-gutter: stable reserves the space so page layout does not jump when the scrollbar appears. See MDN for details on these properties: overflow-y and scrollbar-gutter.

If that does not help, debug this way: open DevTools and check which element is scrollable (inspect computed overflow and height); confirm no ancestor has overflow: hidden or a fixed height that prevents overflow; test in incognito to rule out extensions. Also check OS/browser settings for hidden scrollbars (macOS has an option; see ). If anchors target elements inside a scrollable inner container, the visible scrollbar may belong to that element instead of the document — either make the document the scroll container or adjust your layout so anchors behave as expected.

Caution: forcing a permanent scrollbar changes the look on systems that prefer autohide scrollbars; reserve gutter space or style scrollbars carefully for best UX.

Recommended Answers

All 4 Replies

Member Avatar for AleMonteiro

It's seems that the vertical scrollbar is working OK, tested on Opera and IE 9.

Capture59

Member Avatar for jspence29

Try resizing the page

Member Avatar for Member #120589

Right enough, on my laptop / CHrome - no scrollbars.

Member Avatar for gauravkumaralwar

try resizing pages is best option.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.