Member Avatar for hbmarar

Hi ,

Good morning.

Well, I had a need where the content page was by default loading scrollbars and body scroll="no" not getting effected i added color to the scrollbars to match the background and now it is working fine in the IE.

But the thing that makes me go down is that what should i do for this scroll bar hiding by setting the color or any similiar techinique only for firefox.

I would like to know how the experts here had over come similiar issue.Please share the tips and hints with me.

with regards

Harish

  • 3 Contributors
  • 3 Replies
  • 116 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by hbmarar

Dani AI

Generated

Short version: the IE trick you found relied on nonstandard, browser‑specific features. As noted, Internet Explorer exposed proprietary scrollbar properties that other browsers ignore; and the Gecko hacks mentioned by were never part of the standard and are now superseded. For reliable results today use the standardized CSS rules (Firefox) and vendor pseudo-elements (WebKit/Blink), or hide scrollbars with the cross‑browser pattern below.

A minimal cross‑browser pattern to keep scrolling but hide the visual scrollbar:

/* container remains scrollable but scrollbars are hidden */
.scrollable {
  overflow: auto;
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
}

.scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}

To style scrollbars instead of hiding them, Firefox supports scrollbar-color and scrollbar-width (see the CSS Scrollbars docs), while Blink/Safari require the ::-webkit-scrollbar family of pseudo-elements to customize track/thumb.

Troubleshooting and cautions: body scroll="no" is an obsolete, nonstandard attribute; use overflow on the element you control (often html, body { height:100%; } then body { overflow:hidden; }). If scrollbars persist, inspect which child element is overflowing (developer tools -> computed layout). Hiding scrollbars hurts discoverability and keyboard users; only hide them when you preserve scroll affordance (e.g., via visible content overflow, touch gestures, or explicit controls). For reference on the standardized properties and vendor pseudo-elements, see the MDN documentation on CSS scrollbar support and the overflow property.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

There are no "scrollbar" objects in the standard web DOM for HTML, XHTML, etc. Internet Explorer has implemented some non-standard objects.

In other words, you're writing "broken code", which IE will understand, but which any browser that adheres to standards will not.

Member Avatar for Sailor_Jerry

For firefox i think you could can use "-moz-scrollbars-none" for the overflow property

Member Avatar for hbmarar

Hi,

Yes. done thanks.
visit : maps link in the footer. :)

with regards

Harish

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.