Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
2b35057
Added test.html
cyruscook May 2, 2019
d96122b
NO JQUERY
cyruscook May 2, 2019
6375339
Removed jquery dependencies
cyruscook May 2, 2019
f844135
Removed some JQuery dependencies such as extend
cyruscook May 2, 2019
ee8cfe1
Updated merge function to a better one
cyruscook May 2, 2019
45553a2
Removed Jquery dependency, replaced $window.height() with window.inne…
cyruscook May 2, 2019
f27b4dd
Fixed document.querySelector not giving an array
cyruscook May 2, 2019
08b069c
Fixed setting heights
cyruscook May 2, 2019
2c3df9e
Removed more JQuery dependencies when setting heights
cyruscook May 2, 2019
0c37c42
Added replacement for $(elem).offset()
cyruscook May 2, 2019
6bf5989
Replaced $(elem).on() with elem.addEventListener
cyruscook May 2, 2019
67215d4
Replaced scrollTop with pageYOffset
cyruscook May 2, 2019
2bfa21e
Fixed heights not setting
cyruscook May 2, 2019
552400d
Miscellanous syntax improvements
cyruscook May 2, 2019
b064bff
Fixed margins and improved test page
cyruscook May 2, 2019
1a2ddaf
Changed test.html to tabs
cyruscook May 3, 2019
bf2ef10
Replaced $(elem).attr with elem.getAttribute
cyruscook May 3, 2019
2a9b749
Next & Previous verified working
cyruscook May 3, 2019
080fc27
Replaced many functions with arrow syntax
cyruscook May 3, 2019
6274588
Fixed issue with instant scrolling
cyruscook May 3, 2019
99210ec
Oops, fixed incorrect paramers in window.scrollTo
cyruscook May 3, 2019
87b2ec8
Added some comment and formatting to animateScroll()
cyruscook May 3, 2019
8c7a6a7
AnimateScroll still not working properly
cyruscook May 3, 2019
871efcd
Fixed incorrectly retrieving and setting scroll distance in SizePanels
cyruscook May 3, 2019
60391fe
Removed no favicon console error
cyruscook May 3, 2019
ab67183
Added settings.logging
cyruscook May 3, 2019
9c02364
Maybe allowed indexes in move()?
cyruscook May 3, 2019
7643147
Added protection against out of range panels in move()
cyruscook May 3, 2019
228d0f6
Merge branch 'master' of https://github.com/cyruscook/Scrollify
cyruscook May 3, 2019
0f19188
Removed $window
cyruscook May 3, 2019
d124f4b
Removed wheelhandler JQuery dependencies
cyruscook May 3, 2019
2ae952b
Fully removed JQuery (most likely)
cyruscook May 3, 2019
c490fbf
Removed some inappropriate comments
cyruscook May 3, 2019
6f64839
Moved scrollify.js -> dev.scrollify.js
cyruscook May 3, 2019
b43f862
Added compressed scrollify.js
cyruscook May 3, 2019
f698332
Updated ReadMe to reflect changes
cyruscook May 3, 2019
b0607fe
Fixed scrollify.destroy
cyruscook May 3, 2019
7fd6f19
Added scrollify.getOptions()
cyruscook May 3, 2019
883493b
Used beautifier.io. Hopefully formatting should now be consistent. I'…
cyruscook May 3, 2019
42c622c
Recompiled
cyruscook May 3, 2019
4f00edd
Fixed some incorrect $ usage
cyruscook May 4, 2019
994e317
Remove duplicate extend
lukehaas May 6, 2019
775dcc3
Create helper methods for scroll top and now
lukehaas May 6, 2019
08bf444
A few tweaks to tidy up (#1)
cyruscook May 7, 2019
59535f5
add a cross-browser offset function
lukehaas May 10, 2019
3ca1eef
add a cross-browser offset function (#2)
cyruscook May 10, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# [jQuery Scrollify](https://projects.lukehaas.me/scrollify)
# [Scrollify](https://projects.lukehaas.me/scrollify)

A jQuery plugin that assists scrolling and snaps to sections. Touch optimised.
A vanilla JS plugin that assists scrolling and snaps to sections. Touch optimised.

## Demo

Expand All @@ -22,7 +22,7 @@ A jQuery plugin that assists scrolling and snaps to sections. Touch optimised.

## Basic setup

Scrollify requires jQuery 1.7+.
Scrollify no longer requires JQuery.

The most basic setup is as follows:

Expand All @@ -31,8 +31,8 @@ The most basic setup is as follows:
<html>
<head>
<script>
$(function() {
$.scrollify({
document.addEventListener("DOMContentLoaded", function() {
scrollify({
section : ".example-classname",
});
});
Expand All @@ -50,7 +50,7 @@ The most basic setup is as follows:
This is the default configuration:

```javascript
$.scrollify({
scrollify({
section : ".example-classname",
sectionName : "section-name",
interstitialSection : "",
Expand All @@ -63,6 +63,7 @@ $.scrollify({
overflowScroll: true,
updateHash: true,
touchScroll:true,
logging:false,
before:function() {},
after:function() {},
afterResize:function() {},
Expand Down Expand Up @@ -105,6 +106,9 @@ A boolean to define whether Scrollify updates the browser location hash when scr
`touchScroll`
A boolean to define whether Scrollify handles touch scroll events. True by default.

`logging`
A boolean to define whether Scrollify will log any errors to the console. False by default.

`before(index, sections)`
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.

Expand All @@ -119,60 +123,60 @@ A callback that is fired after Scrollify's initialisation.

## Methods

`$.scrollify.move("#name");`
`scrollify.move("#name");`

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.

`$.scrollify.instantMove("#name");`
`scrollify.instantMove("#name");`

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.

`$.scrollify.next()`
`scrollify.next()`

The next method can be used to scroll to a panel that immediately follows the current panel.

`$.scrollify.previous()`
`scrollify.previous()`

The previous method can be used to scroll to a panel that immediately precedes the current panel.

`$.scrollify.instantNext()`
`scrollify.instantNext()`

The instantNext method can be used to scroll to a panel that immediately follows the current panel, without animation.

`$.scrollify.instantPrevious()`
`scrollify.instantPrevious()`

The instantPrevious method can be used to scroll to a panel that immediately precedes the current panel.

`$.scrollify.destroy()`
`scrollify.destroy()`

The destroy method removes all Scrollify events and removes set heights from the panels.

`$.scrollify.update()`
`scrollify.update()`

The update method recalculates the heights and positions of the panels.

`$.scrollify.current()`
`scrollify.current()`

The current method returns the current section as a jQuery object.
The current method returns the current section as a DOM object.

`$.scrollify.currentIndex()`
`scrollify.currentIndex()`

The currentIndex method returns the current section index, starting at 0.

`$.scrollify.disable()`
`scrollify.disable()`

The disable method turns off the scroll snap behaviour so that the page scroll like normal.

`$.scrollify.enable()`
`scrollify.enable()`

The enable method resumes the scroll snap behaviour after the disable method has been used.

`$.scrollify.isDisabled()`
`scrollify.isDisabled()`

The isDisabled method returns true if Scrollify is currently disabled, otherwise false.


`$.scrollify.setOptions()`
`scrollify.setOptions()`

The setOptions method can be used to change any of the initialisation options. Just parse it an options object.

Expand All @@ -182,6 +186,12 @@ If you're working with Scrollify and having issues, please post your questions t

If you think the issue is with Scrollify itself, please check the [open issues](https://github.com/lukehaas/Scrollify/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.

## Known Issues

- Refreshing the page while not at the top will cause scrolling to be locked.

- Scrollify.update() causes the page to jerk to the top and lock scrolling.

## FAQ

- Do I have to use the section element for Scrollify sections?
Expand Down Expand Up @@ -217,9 +227,9 @@ Scrollify appends a hash value to the URL for each section, this allows for perm
<html>
<head>
<script>
$(function() {
$.scrollify({
section : ".section-class-name",
document.addEventListener("DOMContentLoaded", function() {
scrollify({
section : "div.section-class-name",
sectionName : "section-name"
});
});
Expand Down
Loading