core-scroll: Document css-scroll-snap

[eirikbacker]

https://developers.google.com/web/updates/2018/07/css-scroll-snap is supported by some browsers already, and we should documenting how to use it and considering it as part of #66

More info: https://css-tricks.com/practical-css-scroll-snapping/

[eirikbacker]

This actually not really affects core-scroll itself, but rather something we should document :)

[eirikbacker]

Seems like the scroll-snap does not play well with the JS-scrolling (virtual dragging on desktop). Started documenting, but can see there is more work to be done to get this properly working - not just jumping to snap-points on desktop:

---

Snapping

Snapping to elements on scroll has traditionally been in a bad web user experience, as this has required overwriting the native, natural scrolling. Instead of implementing such overwriting, we encourage using CSS Scroll Snap. This new CSS feature allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions in CSS. If browser lacks support, the scroll area gracefully falls back normal scrolling. See example below, browser support and See CSS-tricks article →

<!--demo-->
<button data-core-scroll="my-snap" value="left" aria-label="Rull til venstre">&larr;</button>
<button data-core-scroll="my-snap" value="right" aria-label="Rull til høyre">&rarr;</button>
<div class="my-wrap">
  <div class="my-scroll" id="my-snap">
    <div>1</div><div>2</div><div>3</div><div>4</div><a href="#">5</a>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
    <div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
  </div>
</div>
<style>
  #my-snap:not([data-core-scroll-dragging]) > * { scroll-snap-align: start }
  #my-snap:not([data-core-scroll-dragging]) {
    overflow: scroll;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-padding: 10px;
  }
</style>
<script>
  coreScroll('.my-scroll');
</script>

[eirikbacker]

Can maybe be solved by scroll-behavior: smooth; 🤔

[skjalgepalg]

This feature is possibly stale and requires further research to establish requirements for present state of core-scroll and web/browser landscape. We need to look into this further. Suggestions and input on this topic are, as always, most welcome