jQuery Plugin For Smooth Scroll Snapping - panelSnap

jQuery Plugin For Smooth Scroll Snapping - panelSnap
File Size: 92.4 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,

    // Navigation options.
    navigation: {
      keys: {
        nextKey: false,
        prevKey: false,
      },
      buttons: {
        $nextButton: false,
        $prevButton: false,
      },
      wrapAround: false,
    },
}
$('body').panelSnap(options);

Change logs:

2018-05-13

  • chore: resolve casing inconstencies
  • feat: allow interruption from mousewheel

2018-05-10

  • refactor: reserve scrollTimeout variable on init

2018-05-09

  • fix: only take directionThreshold into account when actually snapping

2018-04-24

  • Prevent snapping when in large panel

2018-04-23

  • fix: Fix getTargetScrollTop not working for body

2018-04-18

  • Fix getElementsInContainerViewport not returning elements when larger than the viewport.

2018-04-13

  • Add snapToPanel method

2018-04-09

  • JavaScript & CSS updated

2018-03-10

  • JavaScript & CSS updated

2018-01-22

  • feat(snapping): Snap to bottom when scrolling up into large panel.

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.