CSS Scroll Snap Points

Introduction:

Scroll Snap Points is an as of late presented highlight in CSS which guarantees to deliver clients a liquid and exact looking over experience on both input and touch-enabled devices. Enabling designers to characterize snap focuses horizontally or vertically, this new module of CSS gives them complete authority over the scrolling behavior of a scroll container. The fundamental target of Scroll Snap Points is to authorize the scroll positions at which a compartment's 'snapport' or 'scrollport' will finish after the fulfillment of a looking overactivity.

Scroll snapping is a technique that you’ve certainly seen already. When implemented irresponsibly it can become extremely annoying and give a very bad browsing experience to the user. When done right though, it can be a great way to display things like image galleries. It used to be only achievable using JavaScript, but, thanks to the new CSS Scroll Snap module, the effect can now be controlled using CSS.

Example: 

1) In HTML: 

<div class="scroller_container">
  <div class="col col1">
    <div class="inner_col">
    </div>
  </div>
  <div class="col col2">
    <div class="inner_col">
    </div>
  </div>
  <div class="col col3">
    <div class="inner_col">
    </div>
  </div>
  <div class="col col4">
    <div class="inner_col">
    </div>
  </div>
</div>?

2) In CSS:

.col { float: left; width: 100vw; height: 100vh; overflow-x: hidden;}

.scroller_container {
  position: absolute;
  top: 0;
  width: 100% ;
  height: 100%;
  overflow: auto;
  -webkit-scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
          scroll-snap-points-y: repeat(100%);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 100% 0%;
      -ms-scroll-snap-destination: 100% 0%;
          scroll-snap-destination: 100% 0%;
overflow-x: hidden;    
}

.inner_col { background: grey; opacity: 0.5; width: 80vw; margin: 10vh 0 0 10vw; height: 80vh; }

.col1 { background: #00FFFF; }
.col2 { background: #FFFF00; }
.col3 { background: #00FF00; }
.col4 { background: #ADD8E6; }
        

Conclusion: 
By using this we can create a better UI which can adjust as per the screen size. It will improve the user experience and also help to create a responsive web app without using the third party module.  

For Live Example - Click here

Thank You