wt-snapscroll/wt-snapscroll-simple.css at main · web-thread/wt-snapscroll · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* ===================================================================
   Web-Thread SnapScroll - Core Styles
   =================================================================== */

/* * 1. Core Structural Styles
 * These are essential for the snap-scroll functionality.
 */

.wt-snapscroll-zone{
  /* 'mandatory' ensures we always land on a snap point.
     It provides the strict feel for the 100vh sections. */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;

  overflow-y: scroll;

  /* Fixes momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.wt-snapscroll-item{
  padding: 0 !important;
  margin: 0 !important;
  /* Define this as a snap point */
  scroll-snap-align: start;

  /* FORCE the browser to stop here.
     Prevents flying past multiple sections with one swipe. */
  scroll-snap-stop: always;

  /* Use dvh for mobile address bar stability */
  height: 100dvh;
  width: 100%;
}


/* ===================================================================
   Optional Demo / Helper Styles
   =================================================================== */

/*
 * 2. Optional Content Alignment
 * This is an optional helper. It centers the content *within* * the .wt-snapscroll-item.
 *
 * Feel free to remove this or style it however you like.
 */
.wt-snapscroll-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
}