Scrollify - Create Smooth Snapping Scroll Layout Easily

Written by Kevin Liew on 13 May 2016
35,107 Views • Javascript

Snapping scroll is one of a popular layout in web design, it makes sure user is scrolling to the correct screnn by automatically scrolling to the right position. Usually the website layout is divided into different section and each section is made to be 100% width and height so it would scroll and fit into the section nicely.

Scrollify, an open source project created by Luke Haas is coded to do smooth snapping scroll. I used it for one of my projects and I can tell the differences:

  • You can choose to show or hide scrollbar. Even if user scrolled using scrollbar, the whole thing is still working as expected.
  • Different height in different sections will work too. For example, if you have a section that has long content, the scroll would work as normal and do the snapping when it cross over to new section.

Scrollify is equipped with Methods and callback events for customizations. You have method to navigate to different section, disable, enable, destroy and update scrollify instance or change option after the initialisation too.

You can define a hashtag value for each section by using data attribute.

SPECIFICATIONS & DOWNLOAD

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.