Your query seems to be centered around how to disable smooth scrolling, but I will provide a unique perspective on addressing this issue.
What Sets This Answer Apart
While it may be possible to detect users' preference for smooth scrolling, compelling them to disable it is not the ideal solution. Instead of masking the problem, let's focus on resolving it effectively!
Introduction: The Pixel-to-Screen Pipeline
During each frame, the browser undertakes a series of steps to render content onto the screen.
https://i.stack.imgur.com/snoQr.jpg
JavaScript: Often utilized for tasks leading to visual alterations, JavaScript plays a crucial role in animations, data manipulation, and DOM operations. However, other tools like CSS Animations, Transitions, and Web Animations API are also commonly employed.
Style Calculations: This phase involves determining which CSS rules apply to specific elements based on selectors. Once identified, these rules are implemented, culminating in the final styling for each element.
Layout: After establishing the applicable rules for an element, the browser calculates its dimensions and position on the screen. As elements can impact one another within the web layout model, this process may involve significant computations.
Paint: Filling in pixels encompasses drawing text, colors, images, borders, and shadows - essentially all visual components. These drawings typically occur across multiple surfaces referred to as layers.
Compositing: Given that page elements are drawn into various layers, correct sequence rendering ensures accurate display. This becomes crucial for overlapping elements to avoid incorrect layer positioning.
For further insights and original source, refer to this link.
Step 1:
The initial step involves eliminating costly CSS properties that burden rendering processes. While certain properties cannot be entirely removed, substituting rgba(255,255,255,1); with #fff, sans the alpha layer, proves beneficial.
To explore intricate details, visit this resource. Not all properties require extensive layouts or painting, varying in their impact on performance.
Step 2:
Beware of triggers inducing forced synchronous layouts. These occurrences arise when mandating a layout change mid-JavaScript execution cycle, disrupting the pipeline's fluid progression. Avoid acquiring layout attributes and promptly setting them in repetitive sequences.
A detailed list of sync layout causes can be found at this reference. Delve deeper into this topic via this guide.
Step 3:
Transfer components necessitating frequent repainting onto distinct layers.
Browser repaints occur during scrolling and animation playback. To streamline this process, segregate dynamic sections (such as parallax effects, navigation bars, or animations) onto separate browser layers, akin to organizing layers in graphic editing software.
Utilize the will-change CSS property to prompt layer transitions and employ transform: translateZ(0); if necessary to compel browser layer migration.