search

PureCarsLabs / css-scroll-snap-polyfill

JS polyfill for CSS scroll snap points.
MIT License
49 stars 6 forks source link

Create a browser bundle #2

Open smth opened 6 years ago

smth commented 6 years ago

I can't get this to work. With my original CSS (below) I was getting errors. In Chrome: 

Uncaught TypeError: Cannot read property 'y' of undefined
    at z (css-scroll-snap-polyfill.umd.js:1)
    at C (css-scroll-snap-polyfill.umd.js:1)

Firefox:

TypeError: t is undefined css-scroll-snap-polyfill.umd.js:1:16945
z css-scroll-snap-polyfill.umd.js:1:16945
C css-scroll-snap-polyfill.umd.js:1:16518

I then tried adding scroll-snap-align to the body. That stops the error, but nothing is happening in terms of the scrolling. Either version of the CSS works in Safari.

My HTML/CSS is equivalent to :

<body>
  <main>
    <header>
    <section>
      <div></div>
      <div></div>
    </section>
  </main>
</body>
body {
  scroll-snap-type: y mandatory;
}
header {
  height: 100vh;
}
section > div {
  height: 100vh;
  scroll-snap-align: start;
}
kanzelm3 commented 6 years ago

Can you create a codepen or something that shows the issue you are having? I am unable to recreate it.

spd789562 commented 6 years ago

https://codepen.io/spd789562/pen/aqKyBB?editors=0100 some problem on chrome

kanzelm3 commented 6 years ago

To be clear, this project is a js module that must be imported and used like so:

import scrollSnapPolyfill from 'css-scroll-snap-polyfill'

// whenever dom is ready
scrollSnapPolyfill()

This is in the README at the top. I didn't include a bundled version ready for use within a browser, if someone wants to create a PR for that, I would be happy to review. If not, it may take me some time to get around to that.

smth commented 6 years ago

I'm not sure how to recreate this in Codepen (do you have an example?), but to clarify I wasn't asking for a browser bundle, as the new title suggests; I'm using Babel (more precisely a build tool that incorporates Babel). That should work, right?

miketeix commented 6 years ago

I also get the error Uncaught TypeError: Cannot read property 'y' of undefined when I place the scroll-snap-type somewhere other than #root.

In either case I don't get the desired affect of snapping to #main-wrap where I've added the rule scroll-snap-align: start

I noticed there is a scroll listener bound to #root, is it the case that container div that is actually full-height and scrolling needs to also be #root ?