how-it-works.md

How it Works

Overall Structure

This documentation assumes that the provided CSS file is imported.

body {
  /* text and background colors are set */
}

.container-outer {
  /* background color is set */
  /* padding is not colored - background clips to content-box */
}

.container-inner,
.container-outer {
  /* do not nest inner inside outer - use independently */
  /* expands horizontally in the viewport - display is block */
  /* horizontally centered - horizontal margin is set to auto */

  /* content-box width comparison */
  /* inner is narrower than outer due to padding difference */
  /* inner and outer width are same in narrow viewport */
}

<!-- /routes/+layout.svelte -->

<!-- fills the entire viewport - works as a background -->
<div class="container-outer" />

<!-- content is placed above the fixed .container-outer -->
<div style="position: relative; overflow-x: hidden;">
  <slot />
</div>

<style>
  .container-outer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

<!-- /routes/+page.svelte -->

<div class="container-inner">
  <h1>Swipe Scroller</h1>
  <p>xiihu's discography, from latest</p>
</div>

<Scroller>
  <!-- Card components are passed to this slot -->
</Scroller>

The Scroller Component

Before hydration (or when JavaScript is disabled), .container-inner is set on the component. This aligns the left-most card accordingly. Overflow to the right is accomplished by overflow-x: visible. Since the cards are visible but not scrollable, the following <noscript> element is included out-of-the-box.

JavaScript is not available. Horizontal scroll is disabled.

On mount, .container-inner is removed from the component. This puts the left-most card to the left end of the viewport. To align cards accordingly, JavaScript is used to calculate and set the horizontal padding on the .scroller element. The same value is set to scroll-padding-left to snap the cards in place.

Once the paddings are set, all scrolling and snapping is handled by CSS. JavaScript is not used after the initial calculation (and on window resize).