Working Example

[mdugue]

Hi,

I'm very glad somebody started making the current css spec for scroll-snap available to all current browsers 🎉. I just tried to use this polyfill but couldn't make it run successfully on Chrome.

Could you provide a working example?

Here is mine which did work in Safari 11 (also without polyfill) but not in Chrome. https://codesandbox.io/s/348vrvyxo5 It's using react but i'd be glad with any js example…

Btw. if you post a rudimentary snippet / link in this conversation I could offer you to clean it up, add some explanation and return a PR for the readme. Deal?

[kanzelm3]

Hey @mdugue, I will add an example to the repo. There is a gotcha when using with React, you have to wait until the component is mounted to call the polyfill function. In your example, you are effectively calling it before the element has rendered into the DOM and Polyfill.js is unable to find any elements with scroll-snap-type and scroll-snap-align.

[kanzelm3]

To get yours working, you would change it to be:

import React, { Component } from 'react';
import styled from 'styled-components';
import scrollSnapPolyfill from 'css-scroll-snap-polyfill'

const Container = styled.div`
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: mandatory;
  font-size: 0;

  > div {
    width: 100%;
    height: 100px;
    display: inline-block;
    line-height: 100px;
    text-align: center;
    font-size: 50px;
    scroll-snap-align: center;
  }
`

export default class extends Component {
  componentDidMount () {
    scrollSnapPolyfill()
  }

  render () {
    return (
      <Container><div>1</div><div>2</div></Container>
    )
  }
};

[kanzelm3]

If you want to create a PR that adds the example to the repo, that would be awesome. If not, I'll probably get one up after the holidays. I'll leave this issue open so I don't forget.

[mdugue]

Hi @kanzelm3 thanks a lot for the quick reply.

I'd love to send a documentation PR but won't have time before mid January. I'll also have a look than on how far it is possible to encapsulate the polyfill in a proper component for easier reuse.

Have a merry christmas