Floating scroll bars (#3539)

* Move scroll bar spacing settings to a `struct ScrollSpacing`

* Add a demo for changing scroll bar appearance

* Add setting for ScrollBarVisibility in demo

* Add `#[inline]` to a `ScrollArea` builder methods

* Refactor how scroll bar show/hide is computed

* Add support for floating scroll bars

* Tweak color and opacity of the scroll handle

* Allow allocating a fixed size even for floating scroll bars

* Add three pre-sets of scroll bars: solid, thin, floating

* Use floating scroll bars as the default

* Fix id-clash with bidir scroll areas

* Improve demo

* Fix doclink

* Remove reset button from demo

* Fix doclinks

* Fix visual artifact with thin rounded rectangles

* Fix doclink

* typos

crates/egui_demo_lib/src/demo/misc_demo_window.rs

@@ -371,7 +371,7 @@ impl BoxPainting {
                 ui.painter().rect(
                     rect,
                     self.rounding,
-                    Color32::from_gray(64),
+                    ui.visuals().text_color().gamma_multiply(0.5),
                     Stroke::new(self.stroke_width, Color32::WHITE),
                 );
             }

crates/egui_demo_lib/src/demo/scrolling.rs

@@ -1,8 +1,9 @@
-use egui::*;
+use egui::{scroll_area::ScrollBarVisibility, *};
 
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[derive(Clone, Copy, Debug, PartialEq)]
 enum ScrollDemo {
+    ScrollAppearance,
     ScrollTo,
     ManyLines,
     LargeCanvas,
@@ -12,7 +13,7 @@ enum ScrollDemo {
 
 impl Default for ScrollDemo {
     fn default() -> Self {
-        Self::ScrollTo
+        Self::ScrollAppearance
     }
 }
 
@@ -20,6 +21,7 @@ impl Default for ScrollDemo {
 #[cfg_attr(feature = "serde", serde(default))]
 #[derive(Default, PartialEq)]
 pub struct Scrolling {
+    appearance: ScrollAppearance,
     demo: ScrollDemo,
     scroll_to: ScrollTo,
     scroll_stick_to: ScrollStickTo,
@@ -33,7 +35,9 @@ impl super::Demo for Scrolling {
     fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
         egui::Window::new(self.name())
             .open(open)
-            .resizable(false)
+            .resizable(true)
+            .hscroll(false)
+            .vscroll(false)
             .show(ctx, |ui| {
                 use super::View as _;
                 self.ui(ui);
@@ -44,6 +48,7 @@ impl super::Demo for Scrolling {
 impl super::View for Scrolling {
     fn ui(&mut self, ui: &mut Ui) {
         ui.horizontal(|ui| {
+            ui.selectable_value(&mut self.demo, ScrollDemo::ScrollAppearance, "Appearance");
             ui.selectable_value(&mut self.demo, ScrollDemo::ScrollTo, "Scroll to");
             ui.selectable_value(
                 &mut self.demo,
@@ -60,6 +65,9 @@ impl super::View for Scrolling {
         });
         ui.separator();
         match self.demo {
+            ScrollDemo::ScrollAppearance => {
+                self.appearance.ui(ui);
+            }
             ScrollDemo::ScrollTo => {
                 self.scroll_to.ui(ui);
             }
@@ -84,6 +92,75 @@ impl super::View for Scrolling {
     }
 }
 
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "serde", serde(default))]
+#[derive(PartialEq)]
+struct ScrollAppearance {
+    num_lorem_ipsums: usize,
+    visibility: ScrollBarVisibility,
+}
+
+impl Default for ScrollAppearance {
+    fn default() -> Self {
+        Self {
+            num_lorem_ipsums: 2,
+            visibility: ScrollBarVisibility::default(),
+        }
+    }
+}
+
+impl ScrollAppearance {
+    fn ui(&mut self, ui: &mut egui::Ui) {
+        let Self {
+            num_lorem_ipsums,
+            visibility,
+        } = self;
+
+        let mut style: Style = (*ui.ctx().style()).clone();
+
+        style.spacing.scroll.ui(ui);
+
+        ui.add_space(8.0);
+
+        ui.horizontal(|ui| {
+            ui.label("ScrollBarVisibility:");
+            for option in ScrollBarVisibility::ALL {
+                ui.selectable_value(visibility, option, format!("{option:?}"));
+            }
+        });
+        ui.weak("When to show scroll bars; resize the window to see the effect.");
+
+        ui.add_space(8.0);
+
+        ui.ctx().set_style(style.clone());
+        ui.set_style(style);
+
+        ui.separator();
+
+        ui.add(
+            egui::Slider::new(num_lorem_ipsums, 1..=100)
+                .text("Content length")
+                .logarithmic(true),
+        );
+
+        ui.separator();
+
+        ScrollArea::vertical()
+            .auto_shrink([false; 2])
+            .scroll_bar_visibility(*visibility)
+            .show(ui, |ui| {
+                ui.with_layout(
+                    egui::Layout::top_down(egui::Align::LEFT).with_cross_justify(true),
+                    |ui| {
+                        for _ in 0..*num_lorem_ipsums {
+                            ui.label(crate::LOREM_IPSUM_LONG);
+                        }
+                    },
+                );
+            });
+    }
+}
+
 fn huge_content_lines(ui: &mut egui::Ui) {
     ui.label(
         "A lot of rows, but only the visible ones are laid out, so performance is still good:",