A jQuery plugin that assists scrolling and snaps to sections. Touch optimised.
Scrollify requires jQuery 1.7+.
The most basic setup is as follows:
This is the default configuration:
A CSS selector for the sections of the page.
Scrollify lets you define a hash value for each section. This makes it possible to permalink to particular sections. This is set as a data attribute on the sections. The name of the data attribute is defined by
A CSS selector for non-full-height sections, such as a header and footer.
Define the easing method.
A distance in pixels to offset each sections position by.
A boolean to define whether scroll bars are visible or not.
A CSS selector for elements within sections that require standard scrolling behaviour. For example
standardScrollElements: ".map, .frame".
A boolean to define whether Scollify assigns a height to the sections. True by default.
A boolean to define whether Scrollify will allow scrolling over overflowing content within sections. True by default.
A boolean to define whether Scrollify updates the browser location hash when scrolling through sections. True by default.
A boolean to define whether Scrollify handles touch scroll events. True by default.
A callback that is fired before a section is scrolled to. Arguments include the index of the section and an array of all section elements.
A callback that is fired after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.
A callback that is fired after the window is resized.
A callback that is fired after Scrollify's initialisation.
The move method can be used to scroll to a particular section. It can be passed the index of the section, or the name of the section preceded by a hash.
The instantMove method can be used to scroll to a particular section without animation. It can be passed the index of the section, or the name of the section preceded by a hash.
The next method can be used to scroll to a panel that immediately follows the current panel.
The previous method can be used to scroll to a panel that immediately precedes the current panel.
The instantNext method can be used to scroll to a panel that immediately follows the current panel, without animation.
The instantPrevious method can be used to scroll to a panel that immediately precedes the current panel.
The destroy method removes all Scrollify events and removes set heights from the panels.
The update method recalculates the heights and positions of the panels.
The current method returns the current section as a jQuery object.
The currentIndex method returns the current section index, starting at 0.
The disable method turns off the scroll snap behaviour so that the page scroll like normal.
The enable method resumes the scroll snap behaviour after the disable method has been used.
The isDisabled method returns true if Scrollify is currently disabled, otherwise false.
The setOptions method can be used to change any of the initialisation options. Just parse it an options object.
If you're working with Scrollify and having issues, please post your questions to Stackoverflow and tag it with 'jquery-scrollify'.
If you think the issue is with Scrollify itself, please check the open issues to see if it has already been logged. If it hasn't, please open a ticket with a detailed description of what you're seeing and details of the device and browser version you're seeing it on.
No, Scrollify sections have no relation to the section element. Scrollify sections can be any element you want.
Yes, this is something you can easily implement in either the
after callbacks (which ever suites you best).
No, this is not currently supported.
Yes. Scrollify works well on mobile but if you need to disable it you can use the disable method.
You must ensure that there is no collapsed content within your sections. This often happens when you have floated content within a container that isn't cleared. All content must be properly contained in order for an accurate section height to be calculated.
This happens when your browser is running in Quirks Mode, usually as the result of an incorrect doctype.
Scrollify appends a hash value to the URL for each section, this allows for permalinking to particular sections. To define the hash value for each section you need to set a data-attribute on your sections. This data attribute can be called anything you like. The default is "section-name", but if you'd like something else then you'll need to define it with the
|IE 7+ ✔||Chrome ✔||Firefox ✔||Opera ✔||Safari ✔|
Special thanks to Browserstack for supporting Scrollify.
git checkout -b my-new-feature
git commit -m 'Add some feature'
git push origin my-new-feature