Home > Common Problem > body text

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome

WBOY
Release: 2023-04-14 10:52:16
forward
1649 people have browsed it
Microsoft brings Windows 11s Fluent scrollbars to Google Chrome

Unlike Windows 10, Windows 11 features new modern “fluid scrollbars” that change shape when users interact with them. Fluent scrollbars are dynamic in nature, they automatically scale in different form factors or when you change the window size, and it is currently used in apps like Settings, Media Players, and more.

Google Chrome may soon have smooth scrollbar functionality, according to a new proposal from Microsoft. Microsoft said in a proposal that it wants to modernize old scroll bars in Chrome to bring Google's browser into compliance with Windows 11 design standards.

This proposal aims to modernize Chromium scrollbars (overlay and non-overlay) to fit the Windows 11 Fluent design language. Additionally, Microsoft is also considering some visually appealing changes to how users interact with scrollbars in different modes in Chrome:

  • Minimal Mode: This will be the default design for scrollbars.
    Microsoft brings Windows 11s Fluent scrollbars to Google Chrome
  • Full mode: The full mode scroll bar is when the cursor is over the scroll bar area, all parts such as thumbs or buttons will be drawn.
    Microsoft brings Windows 11s Fluent scrollbars to Google Chrome
  • Hidden Mode: This is a new feature where the scrollbar disappears completely and the exact position on the page may not be found. For this reason, Google is concerned about hidden mode, and Microsoft is actively exploring better ways to handle visual improvements.

To better understand the differences, here is a comparison between the new scrollbars available in Microsoft Edge and the classic scrollbars in Chrome:

Microsoft brings Windows 11s Fluent scrollbars to Google Chrome

Other features/changes:

  • The root overlay scrollbar will always appear in minimal mode.
  • The scrollbar transitions to full mode when the pointer is directly on the track.
  • On startup, all scrollbars are drawn, the root scrollbar remains visible (in minimal mode), and the rest fade out.
  • When the pointer enters a non-root ScrollNode, the scroll bar is drawn in minimal mode.
  • When the pointer leaves the node boundary, the minimal mode scroll bar fades out.
  • Matching text via Ctrl F causes the scrollbar to be drawn immediately in full mode, and tick marks to appear on the track at the matched location.

Microsoft also noted that "Stealth Mode" can be bypassed using Windows 11's native solution "Always turn on scrollbars." Like macOS, "Always show scroll bars" can be enabled from Settings -> Accessibility -> Visual Effects. New scrollbars will be aware of native settings.

"When this feature is enabled, scroll bars will be drawn in "full mode." With this operating system setting, scroll bars will take up layout space," Microsoft notes.

Microsoft brings Windows 11s Fluent scrollbars to Google Chrome

As you can see in the screenshot above, Microsoft's proposed scrollbar will be more like an overlay scrollbar. They will be thinner, with insets and rounded edges. Microsoft also plans to redesign non-overlay scrollbars to modernize Chrome on Windows 11 if Google developers reject overlay scrollbars.

Microsoft has been considering providing this feature for Chromium-based web browsers since January 2022.

Back in 2021, a Microsoft developer had confirmed that the company also intended to bring some Edge design improvements to Chromium.

The above is the detailed content of Microsoft brings Windows 11's Fluent scrollbars to Google Chrome. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:yundongfang.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template