jQuery Plugin For Smooth Scroll Snapping - panelSnap

jQuery Plugin For Smooth Scroll Snapping - panelSnap
File Size: 14.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

panelSnap is a jQuery plugin that allows to snap to blocks of content when you scroll through a web page or parts of it.

See also:

Basic Usage:

1. Include jQuery javascript library on your web page

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="jquery.panelSnap.js"></script> 

2. Include jquery.customEvents.js for Special flavoured Mobile Scrollstart & Scrollstop events.

<script src="jquery.customEvents.js"></script> 

3. Create the html

<section>
      ...
</section>

<section>
      ...
</section>

<section>
      ...
</section>

4. Call the plugin

<script>
      $('body').panelSnap();
</script>

5. Options

var options = {
// jQuery object referencing a menu that contains menu items
$menu: false, 

// CSS selector to menu items (scoped within the menu)
menuSelector: 'a',

// css selector to panels (scoped within the container)
panelSelector: 'section', 

// jQuery event namespace that's being used
namespace: '.panelSnap',

// fired before a panel is being snapped
onSnapStart: function(){}, 

// fired after a panel was snapped
onSnapFinish: function(){}, 

// fired before a panel is being snapped.
onActivate: function(){},

// An integer specifying the ammount of pixels required to scroll 
// before the plugin detects a direction and snaps to the next panel.
directionThreshold: 50, 

// The ammount of miliseconds in which the plugin snaps to the desired panel
slideSpeed: 200,

// The jQuery easing animation to use.
easing: 'linear',

// An integer specifying the number of pixels to offset when snapping to a panel.
offset: 0,

// keyboard navigation.
keyboardNavigation: {
  enabled: false,
  nextPanelKey: 40,
  previousPanelKey: 38,
  wrapAround: true
},

strictContainerSelection: true
};

$('body').panelSnap(options);

Change logs:

2017-09-17

  • refer document.scrollingElement as the snap container in browsers that support it when the container is body, and don't overwrite it to be body in Chrome as Chrome 61 now supports this properly

v0.15.1 (2015-11-09)

  • Improve panel finding logic in snapTo method.
  • Code cleanup.
  • Update demo styling.

v0.14.0 (2015-01-23)

  • Added easing option to panel snap

v0.13.0 (2014-12-10)

  • Added easing option to panel snap

v0.12.0 (2014-04-25)

  • Minor fixes in the scrolling logic.

v0.11.0 (2014-01-22)

  • version update.

v0.10.3 (2014-01-20)

  • Makes snapToPanel require a valid target. 

v0.9.2 (2013-10-25)

  • Reformats plugin and moves custom events into plugin file.

v0.9.1 (2013-09-04)

  • Reformats plugin and moves custom events into plugin file.

This awesome jQuery plugin is developed by guidobouman. For more Advanced Usages, please check the demo page or visit the official website.