mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-01-07 05:39:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

update ScrollContainer comment

Browse Source
This commit is contained in:
Aran-Fey
2024-06-29 14:01:35 +02:00
parent 3d71045259
commit a7c017b009
1 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/css/style.scss
View File

@@ -1608,12 +1608,7 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
}
// ScrollContainer
/// Enables scrolling in one or both directions. Scrolling can be controlled by
/// setting the element's `data-scroll-x` and `data-scroll-y` to `always`,
/// `auto`, or `never`.
///
/// Requires 2 nested helper elements.
//
// Scrolling is super weird. You'd think scrolling would be easy to achieve, but
// no. I don't really understand what makes it so difficult, but here are some
// of the issues I struggled with:
@@ -1627,33 +1622,21 @@ $rio-input-box-text-distance-from-bottom: 0.4rem; // To be aligned with the <inp
// 4. When scrolling is only enabled in one direction, the parent may need to
// grow larger in the other direction in order to fit the scroll bar.
// 5. The element must have a minimum size so that the scroll bars are usable.
// But ideally, this minimum size should only apply when the scroll bar is
// actually visible.
//
// The solution I've found is quite involved. We actually need to do different
// things depending on whether the element can scroll in both directions or only
// one. First, the easier scenario: Scrolling in both directions.
// The solution I've found requires 3 nested elements. From the outside in:
//
// - Kill the child's size request with `position: absolute`
// - Force it to fill the parent with `width: 100%` and `height: 100%`.
//
// Scrolling in only 1 direction requires 3 helper elements. From the inside
// out:
//
// 1. Just a single-container. Without this element, weird things happen for
// reasons I don't understand. (Note: It's good that this element exists
// anyhow, since it can also play the role of the helper element when
// scrolling in both directions. This way the `overflow` setting is always
// applied on the middle element, which is nice and consistent.)
// 1. An element with `position: relative`, so that its child can size itself
// with `100%`.
//
// 2. This is where the CSS `overflow` setting is applied. We also override the
// child's size request by explicitly setting the `width`/`height` to the
// minimum size where the scroll bars are still usable.
// minimum size where the scroll bars are still usable. (And force the
// element to fill its parent by setting `min-width`/`min-height` to `100%`.)
//
// 3. Stretches the middle element to its own size to ensure that it fills up
// the available space, despite its explicit `width`/`height`. This is done
// with a flexbox: With `flex-grow`, children can become larger than their
// intrinsic size.
// 3. For some reason, when an element scrolls horizontally, it overrides the
// width of its child, which can lead to the child being smaller than its
// content. This element exists solely to fix that with a `min-width:
// max-content`.
.rio-scroll-container {
pointer-events: auto;