Member Avatar for Doctor Inferno

Is there a way to enable or disable smooth scrolling in CSS?

My site has this very slow smooth scrolling when I enable smooth scrolling in firefox.

  • 5 Contributors
  • 9 Replies
  • 192 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Doctor Inferno

Dani AI

Generated

As observed, the Firefox “smooth scrolling” that changes wheel/trackpad behavior is a browser/user preference — it is not something a site can force on or off with CSS. The CSS scroll-behavior property only controls how the browser animates programmatic or in-page navigation (anchors / JS scrolling); user input scrolling may be unaffected or ignored by the user agent. (developer.mozilla.org)

If the page itself is applying smooth motion (anchor links or site scripts), that can be controlled on the author side. Example patterns that work across modern browsers:

  • CSS for in-page links:

    html { scroll-behavior: smooth; }    /* enable */
html { scroll-behavior: auto; }      /* instant jumps */

  • JavaScript for animated jumps:

    elem.scrollIntoView({ behavior: 'smooth', block: 'start' });
window.scrollTo({ top: 0, behavior: 'auto' });   /* immediate jump */

These APIs are standard and supported in current browsers; they are the mechanism sites use when implementing custom smooth scrolling. (developer.mozilla.org)

The CSS posted by (scrollbar-*) is an old, nonstandard IE feature and will not change Firefox’s scrolling behavior; modern scrollbar styling uses the CSS Scrollbars module or vendor pseudo-elements (and it’s generally discouraged for accessibility). (w3.org)

For accessibility and to avoid forcing motion on people who prefer reduced motion, pages should disable site-controlled smooth scrolling when the OS/browser preference signals reduced motion. Example:

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

Or detect it in JS with matchMedia('(prefers-reduced-motion: reduce)'). Respecting that preference is recommended. (developer.mozilla.org)

If scrolling feels “laggy” even when smooth scrolling is expected, common causes are heavy work on the main thread during scroll (non-passive wheel/scroll handlers, layout/thrashing, expensive paints). Use passive listeners for touch/wheel events, move heavy work out of scroll handlers, batch DOM writes inside requestAnimationFrame, and profile with DevTools to find the bottleneck. (developer.mozilla.org)

Summary: the browser-level smooth-scrolling toggle seen in Firefox is controlled by the user/UA; the page can only control its own programmatic scrolling (CSS/JS) and should respect reduced-motion preferences while profiling and removing expensive scroll handlers if motion is janky.

Recommended Answers

All 9 Replies

Member Avatar for sreein1986 
<style type="text/css">
<!--
		.{
	scrollbar-3dlight-color: #ccccff;
	scrollbar-arrow-color: #006666;
	scrollbar-base-color: #FFFFFF;
	scrollbar-darkshadow-color: #006666;
	scrollbar-face-color: #FFFFFF
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-track-color: #ccccff;
		}
-->
</style>

use this style sheet to your each page and it's give different looking to scroll the page

Member Avatar for Doctor Inferno

Is there a way to slow down the scrolling or something like that?

Member Avatar for Andrew Hucks

I think there may be, but I doubt it. If you really want to, you can just add loads of HTML to slow it down. ;-)

Why would you want to slow it down, though?

Member Avatar for Doctor Inferno

My website has this kind of 'laggy' scrolling when i enable smooth scrolling in firefox.

Member Avatar for Andrew Hucks

My website has this kind of 'laggy' scrolling when i enable smooth scrolling in firefox.

Is it just you, or have others reported it?

Member Avatar for MidiMagic

Smooth scrolling belongs to the owner of the computer, not to you.

Member Avatar for SpottedOwlStew

Smooth scrolling belongs to the owner of the computer, not to you.

You need to visit the NewYorkTimes.com web site.
They are effecting a smooth scroll, similar to the
Firefox add-on. I have not found another site using
it so far.

Member Avatar for MidiMagic

JavaScript may be in use to provide the smooth scrolling.

Member Avatar for Doctor Inferno

Is there a way to use javascript to reverse the effect?

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.