Css scroll snap

Scroll snap css

/* Answer to: "scroll snap css" */

/*
  CSS Scroll Snap is a module of CSS that introduces scroll snap positions,
  which enforce the scroll positions that a scroll container’s scrollport may
  end at after a scrolling operation has completed.

  Here's two guides on how to use this module:
  - https://blog.logrocket.com/how-to-use-css-scroll-snap/
  - https://css-tricks.com/practical-css-scroll-snapping/
*/

Source: developer.mozilla.org

Css scroll snap

.container {
  scroll-snap-type: mandatory; 
}

.child {
  scroll-snap-align: start;
}

/* Guide: https://css-tricks.com/practical-css-scroll-snapping/ */

How to snap the scroll is css

.parent-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.child-containers {
  height: 100vh;
  scroll-snap-align: start;
}

Source: css-tricks.com

Similar codes

0 vote307 views3 answers
Css keep focus color on div after click
CSS
32 votes319 views3 answers
Letter spacing css
CSS
68 votes306 views6 answers
Css cursor pointer
CSS
80 votes310 views2 answers
Text-transform
CSS
0 vote328 views1 answer
Background Image Accessibility concerns
CSS
0 vote301 views1 answer
Scss variables mixins
CSS
4 votes296 views1 answer
Css selector every child except last
CSS
109 votes304 views6 answers
Position absolute
CSS
0 vote302 views1 answer
Underlined style for a link
CSS
0 vote339 views1 answer
Set another font in css
CSS