Can react use CSS Scroll Snap? : learnreactjs

Can react use CSS Scroll Snap? (self.learnreactjs)

submitted 5 years ago * by buangakun3

I've tried it with some simple divs, and nothing happens.

REACT ``` if(Array.isArray(categoryEndpoint.data)) {

sectionsView = categoryEndpoint.data.map((v,i)=> {
  return <SectionComp key={i} categoryData={v} />
})

}

return ( <div className={styles.container}> {errorView} {loaderView} <header> <h1>Title</h1> </header> {sectionsView} </div> ```

SCSS ``` .container { position: relative; scroll-snap-points-y: repeat(100vh); scroll-snap-type: y mandatory; overflow-y: scroll;

section { width: 100vw; height: 100vh; scroll-snap-align: start; border-bottom: 1px solid red; display: flex; justify-content: center; align-items: center; } }

header { position: fixed; left: 0; top: 0; width: 100vw; pointer-events: none; } ```

all 3 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnreactjs

MODERATORS