From 4b75449925036036b4d2272b2010cf516783729d Mon Sep 17 00:00:00 2001
From: Dave Bitter <dbitter@anwb.nl>
Date: Thu, 18 Nov 2021 16:29:29 +0100
Subject: [PATCH] feat(quick-bit): Add scroll snap article

---
 content/articles/quickBits.md         |  59 ++++++++++++++++++++++++++
 public/img/quick-bits/scroll-snap.png | Bin 0 -> 4083 bytes
 2 files changed, 59 insertions(+)
 create mode 100644 public/img/quick-bits/scroll-snap.png

diff --git a/content/articles/quickBits.md b/content/articles/quickBits.md
index 59b88d0..43e87f3 100644
--- a/content/articles/quickBits.md
+++ b/content/articles/quickBits.md
@@ -1,5 +1,64 @@
 ---
 items:
+  - type: quick-bits
+    body: >-
+      The idea is simple; the user scrolls. As soon as the user is over a certain threshold, you snap to the next item. We used to do this with Javascript to calculate when the user is over this threshold. We would then manually scroll to a certain position with a neat animation.
+
+
+      Besides this code becoming complex, it relies heavily on Javascript (that needs to be loaded). Next to that, you'd need to take certain aspects into account like cancelling the scroll snap if the user changes scroll direction. It would be great if the browser can handle all of this for us. Luckily it can!
+
+      ## CSS scroll snap
+
+      [The CSS scroll snap API](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) offers this for the web. In essence, you need two things. A container that needs to be scrolled in and items to snap to. Firstly, you add the `scroll-snap-type` property to the container:
+
+
+      ```css
+
+      main {
+        height: 100vh;
+        overflow-y: auto;
+        scroll-snap-type: y mandatory;
+      }
+
+      ```
+
+
+      `y` is the direction you want to snap to. In this example, we want to snap while the user is scrolling vertically. `mandatory` is one of the values you can use to always snap:
+
+
+      *The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.*
+
+
+      Next, we can tell the items where we would like to align the scroll snapping to. You can do this by using the `scroll-snap-align` property on the item:
+
+
+      ```css
+
+      section {
+        scroll-snap-align: center;
+      }
+
+      ```
+
+      And that's it! This is all we need to implement scroll snapping with CSS only. Have a look at the interactive demo over at [Codepen](https://codepen.io/davebitter/full/oNeJQJw) or below. Thanks for reading!
+
+      <p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNeJQJw" data-user="davebitter" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+        <span>See the Pen <a href="https://codepen.io/davebitter/pen/oNeJQJw">
+        Full-page scroll snap</a> by Dave Bitter (<a href="https://codepen.io/davebitter">@davebitter</a>)
+        on <a href="https://codepen.io">CodePen</a>.</span>
+      </p>
+      <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+      <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+    date: 2021-11-18T00:00:00.000Z
+    slug: css-scroll-snap
+    tags:
+      - front-end
+    intro: >-
+      Scroll snapping is a popular technique to focus on a single piece of information. How can we implement this without the need and complexity of Javascript-based solutions?
+    teaserCopy: >-
+      Scroll snapping is a popular technique to focus on a single piece of information. How can we implement this without the need and complexity of Javascript-based solutions?
+    teaserImage: /img/quick-bits/scroll-snap.png
+    title: Full page scroll snapping with CSS only
   - type: quick-bits
     body: >-
       Full disclaimer, I came across this solution watching a 45-second video by Fireship on Youtube which you can watch [here]([https://www.youtube.com/watch?v=ITogH7lJTyE](https://www.youtube.com/watch?v=ITogH7lJTyE)). All credits to them. I'm a fan of reading these at my own pace, how impressive 45 seconds is though, so here it is in writing.
diff --git a/public/img/quick-bits/scroll-snap.png b/public/img/quick-bits/scroll-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..978580c761e3696db2e163ef6bc26fdee6692ec9
GIT binary patch
literal 4083
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
PI{-MZb7z-3{&e7PHYx-%

literal 0
HcmV?d00001