CSS Scroll Snap Points

Posted By :Ravi Rose |25th March 2019

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


About Author

Ravi Rose

Ravi is a versatile Backend Developer with a strong expertise in WordPress technology. He is well-versed in the latest technologies like HTML, CSS, Bootstrap, JS, WordPress, PHP, and ReactJS. Ravi has contributed to multiple internal and client projects such as TripCongo, Transleqo, Hydroleap, OodlesAI, and Nokenchain. He has also demonstrated his capabilities in various other areas such as project management, requirement analysis, client communication, project execution, and team management. With his wide range of skills and experience, he can deliver exceptional results and add value to any organization he works with.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us