When creating my personal site in 2016, fullscreen scrolling websites were all the rage. However, none of the open-source libraries available were what I was looking for; fullPage by Alvaro Trigo came close, but did not allow the centering of elements less than the height of the viewport. So I decided to create my own snap scrolling JavaScript library, snapScroll.js.

Note: There is considerable controversy over “scroll-hijacking”, whereby a website overrides the native scrolling behavior of the browser to create its own interaction, which confuses some visitors. This is a very important note to consider, and the reason why my website no longer uses snapScroll.js.

Creating the Library#

SnapScroll.js was built as a jQuery plugin, in order to use jQuery’s scrollTo function. It revolves around adding snap points throughout the page, added via a data-snap-point attribute, which determines the scrolling flow of the page. Custom jQuery easings enable the possibility of quirky scrolling, such as a bouncing effect at the bottom of the page.

Browser Support#

SnapScroll.js was kindly supported by BrowserStack, in order to test browser support and find any problems with the scroll detection. SnapScroll.js supports the following browsers:

• Chrome ≥ 26
• Firefox ≥ 21
• Edge ≥ 14
• Opera ≥ 15
• Safari ≥ 6.2
• Internet Explorer not supported