https://github.com/cedricss/elm-scroll-snap

Scrollable containers with snapping
https://github.com/cedricss/elm-scroll-snap

elm scroll-snap

Last synced: 19 days ago
JSON representation

Scrollable containers with snapping

• Host: GitHub
• URL: https://github.com/cedricss/elm-scroll-snap
• Owner: cedricss
• License: mit
• Created: 2021-09-08T16:16:55.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-12T16:43:36.000Z (over 3 years ago)
• Last Synced: 2023-08-08T20:38:56.816Z (over 1 year ago)
• Topics: elm, scroll-snap
• Language: Elm
• Homepage: https://package.elm-lang.org/packages/cedricss/elm-scroll-snap/latest
• Size: 267 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Elm Scroll Snap

Scrollable containers with snapping.

```

elm install cedricss/elm-scroll-snap

```

This library is based on elm-css and accepts `Html.Styled.Html` items.

If you are not using elm-css, use `Html.Styled.fromUnstyled` and `Html.Styled.toUnstyled` to convert the items and the resulting container.

## Containers

### Horizontal

Create a container with horizontal scrolling. The most visible item is centered horizontally.

```elm

  div

      [ css

          [ border3 (px 1) solid (hex "eee")

          , width (px 500)

          ]

      ]

      [ ScrollSnap.horizontal

          { itemWidth = px 280 }

          [ item1, item2, item3, item4, item5 ]

      ]

```

![Demo](https://github.com/cedricss/elm-scroll-snap/raw/main/img/horizontal.gif)

### Vertical

Coming next.

## Links

- [package.elm-lang.org/packages/cedricsoulas/elm-scroll-snap/latest](https://package.elm-lang.org/packages/cedricss/elm-scroll-snap/latest)