{"id":13607940,"url":"https://github.com/Mobius1/Pageable","last_synced_at":"2025-04-12T14:31:33.970Z","repository":{"id":40643772,"uuid":"147844986","full_name":"Mobius1/Pageable","owner":"Mobius1","description":"Create full page scrolling web pages. No jQuery.","archived":true,"fork":false,"pushed_at":"2023-10-10T21:09:29.000Z","size":279,"stargazers_count":375,"open_issues_count":26,"forks_count":58,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-18T11:07:52.913Z","etag":null,"topics":["anchor","fullpage","javascript","mousewheel","nojquery","onepage","scrolling","slideshow","swipe"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mobius1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-07T15:55:05.000Z","updated_at":"2025-03-17T15:29:25.000Z","dependencies_parsed_at":"2024-01-16T23:30:23.232Z","dependency_job_id":"9b3d51a4-500c-4c75-abc0-044e3289950a","html_url":"https://github.com/Mobius1/Pageable","commit_stats":{"total_commits":181,"total_committers":4,"mean_commits":45.25,"dds":0.08839779005524862,"last_synced_commit":"c7858e75124677b37389c5980807ca511aad06b7"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mobius1%2FPageable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mobius1%2FPageable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mobius1%2FPageable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mobius1%2FPageable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mobius1","download_url":"https://codeload.github.com/Mobius1/Pageable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248581180,"owners_count":21128118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anchor","fullpage","javascript","mousewheel","nojquery","onepage","scrolling","slideshow","swipe"],"created_at":"2024-08-01T19:01:23.004Z","updated_at":"2025-04-12T14:31:32.231Z","avatar_url":"https://github.com/Mobius1.png","language":"JavaScript","readme":"# Pageable\n\n[![Maintenance](https://img.shields.io/maintenance/yes/2020?style=for-the-badge)](https://github.com/Mobius1/Pageable/graphs/commit-activity)\n[![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/Mobius1/Pageable.svg?style=for-the-badge)](https://codeclimate.com/github/Mobius1/Pageable/maintainability)\n![](http://img.badgesize.io/Mobius1/Pageable/master/dist/pageable.min.js?style=for-the-badge) \n![](http://img.badgesize.io/Mobius1/Pageable/master/dist/pageable.min.js?compression=gzip\u0026label=gzipped\u0026style=for-the-badge)\n[![npm](https://img.shields.io/npm/dt/pageable.svg?style=for-the-badge)](https://www.npmjs.com/package/pageable)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](https://github.com/Mobius1/Pageable/blob/master/LICENSE)\n[![GitHub release](https://img.shields.io/github/release/Mobius1/Pageable.svg?style=for-the-badge)](https://github.com/Mobius1/Pageable/releases)\n[![npm](https://img.shields.io/npm/v/pageable.svg?style=for-the-badge)](https://www.npmjs.com/package/pageable)\n[![GitHub issues](https://img.shields.io/github/issues-raw/Mobius1/Pageable.svg?style=for-the-badge)](https://github.com/Mobius1/Pageable)\n[![GitHub issues](https://img.shields.io/github/issues-closed-raw/Mobius1/Pageable.svg?style=for-the-badge)](https://github.com/Mobius1/Pageable)\n\nPageable transforms a web page into a full page scrolling presentation.\n\n  - Lightweight (less than 3kb gzipped)\n  - Responsive\n  - Performant\n  - Touch support\n  - Easy to set up\n  - IE10+\n\n---\n\n## Demos\n  - [Playground](https://mobius1.github.io/Pageable/)\n  - [Adding progress bars](https://mobius1.github.io/Pageable/progress.html)\n  - [Infinite Scrolling](https://mobius1.github.io/Pageable/infinite.html)\n  - [Infinite Slideshow](https://mobius1.github.io/Pageable/slideshow.html)\n  - [Fun with delays](https://mobius1.github.io/Pageable/delay.html)\n  - [Full-page image gallery](https://mobius1.github.io/Pageable/gallery.html)\n\n---\n\nIf this project helps you then you can grab me a coffee or beer to say thanks.\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=42AR2ZMBHWVTW\u0026source=url)\n\n---\n\n## Contents\n\n* [Getting Started](#getting-started)\n  * [Install](#install)\n  * [Browser](#browser)\n  * [Set up](#set-up)\n  * [Anchors](#anchors)\n* [API](#api-reference)\n  * [Options](#options)\n    * [childSelector](#childselector)\n    * [anchors](#anchors-1)\n    * [pips](#pips)\n    * [animation](#animation)\n    * [delay](#delay)\n    * [throttle](#throttle)\n    * [orientation](#orientation)\n    * [swipeThreshold](#swipethreshold)\n    * [freeScroll](#freescroll)\n    * [navPrevEl](#navprevel)\n    * [navNextEl](#navnextel)\n    * [infinite](#infinite)\n    * [easing](#easing)\n    * [events](#events)\n    * [onInit](#oninit)\n    * [onUpdate](#onupdate)\n    * [onBeforeStart](#onbeforestart)\n    * [onStart](#onstart)\n    * [onScroll](#onscroll)\n    * [onFinish](#onfinish)\n  * [Methods](#methods)\n    * [destroy()](#destroy)\n    * [init()](#init)\n    * [next()](#next)\n    * [prev()](#prev)\n    * [scrollToPage()](#scrolltopagepage)\n    * [scrollToAnchor()](#scrolltoanchoranchor)\n    * [orientate()](#orientateorientation)\n    * [slideshow()](#slideshow-1)\n    * [on()](#onevent-callback)\n    * [off()](#offevent-callback)\n  * [Custom Events](#custom-events)\n---\n\n## Install\n\n### npm\n```\nnpm install pageable --save\n```\n\n---\n\n### Browser\n\nGrab the file from one of the CDNs and include it in your page:\n\n```\nhttps://unpkg.com/pageable@latest/dist/pageable.min.js\n```\n\nYou can replace `latest` with the required release number if needed.\n\nYou can also include the optional stylesheet that applies styling to the nav pips and buttons: \n\n```\nhttps://unpkg.com/pageable@latest/dist/pageable.min.css\n```\n\n---\n\n## Set up\n\nDefine a container element that has at least one descendant element with the `data-anchor` attribute.\n### HTML\n```html\n\u003cdiv id=\"container\"\u003e\n    \u003cdiv data-anchor=\"Page 1\"\u003e\u003c/div\u003e\n    \u003cdiv data-anchor=\"Page 2\"\u003e\u003c/div\u003e\n    \u003cdiv data-anchor=\"Page 3\"\u003e\u003c/div\u003e\n    \u003cdiv data-anchor=\"Page 4\"\u003e\u003c/div\u003e\n    ....\n\u003c/div\u003e\n```\n\nInstantiate Pageable and pass a reference to the container in the constructor:\n### JS\n```javascript\nnew Pageable(\"#container\");\n```\n\nThe HTML will be transformed in the following way:\n```html\n\u003cdiv class=\"pg-wrapper\"\u003e\n    \u003cdiv id=\"container\" class=\"pg-container\"\u003e\n        \u003c!-- pages --\u003e\n        \u003cdiv data-anchor=\"page-1\" id=\"page-1\" class=\"pg-page pg-active\"\u003e\u003c/div\u003e\n        \u003cdiv data-anchor=\"page-2\" id=\"page-2\" class=\"pg-page\"\u003e\u003c/div\u003e\n        \u003cdiv data-anchor=\"page-3\" id=\"page-3\" class=\"pg-page\"\u003e\u003c/div\u003e\n        \u003cdiv data-anchor=\"page-4\" id=\"page-4\" class=\"pg-page\"\u003e\u003c/div\u003e\n        ...\n    \u003c/div\u003e\n    \u003c!-- pips will go here --\u003e\n\u003c/div\u003e\n```\n\nIf you don't set the `[data-anchor]` attribute then you must set the anchors with the [`anchors`](#anchors-1) option.\n\nIf `pips` are enabled, their HTML will be appended to the `.pg-wrapper` element after the `.pg-container` element.\n\nThe defined anchors will be 'slugified' and used as the page's `id` - e.g. `My Page 1` will be converted to `my-page-1`\n\nTake care not to have another element with a duplicate `id`\n\n\n---\n\nYou can pass an object as the second paramater to customise the instance:\n\n### JS\n```javascript\nnew Pageable(\"#container\", {\n    childSelector: \"[data-anchor]\" // CSS3 selector string for the pages\n    anchors: [], // define the page anchors\n    pips: true, // display the pips\n    animation: 300, // the duration in ms of the scroll animation\n    delay: 0, // the delay in ms before the scroll animation starts\n    throttle: 50, // the interval in ms that the resize callback is fired\n    orientation: \"vertical\", // or horizontal\n    swipeThreshold: 50, // swipe / mouse drag distance (px) before firing the page change event\n    freeScroll: false, // allow manual scrolling when dragging instead of automatically moving to next page\n    navPrevEl: false, // define an element to use to scroll to the previous page (CSS3 selector string or Element reference)\n    navNextEl: false, // define an element to use to scroll to the next page (CSS3 selector string or Element reference)\n    infinite: false, // enable infinite scrolling (from 0.4.0)\n    slideshow: { // enable slideshow that cycles through your pages automatically (from 0.4.0)\n        interval: 3000, // time in ms between page change,\n        delay: 0 // delay in ms after the interval has ended and before changing page\n    },\n    events: {\n        wheel: true, // enable / disable mousewheel scrolling\n        mouse: true, // enable / disable mouse drag scrolling\n        touch: true, // enable / disable touch / swipe scrolling\n        keydown: true, // enable / disable keyboard navigation\n    },\n    easing: function(currentTime, startPos, endPos, interval) {\n        // the easing function used for the scroll animation\n        return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;\n    },\n    onInit: function() {\n        // do something when the instance is ready\n    },\n    onUpdate: function() {\n        // do something when the instance updates\n    },    \n    onBeforeStart: function() {\n        // do something before scrolling begins\n    },\n    onStart: function() {\n        // do something when scrolling begins\n    },\n    onScroll: function() {\n        // do something during scroll\n    },\n    onFinish: function() {\n        // do something when scrolling ends\n    },\n});\n```\n\n---\n\n### Anchors\n\nAny anchor on your page that has a hash that matches the ones in the current `Pageable` instance will trigger scrolling. This allows you to add navigation links without needing to define event listeners or callbacks to get them to trigger a scroll.\n\n---\n\n## API Reference\n\n---\n## Options\n### `childSelector`\n###### type: `Boolean`\n###### default: `true`\n\nA CSS3 selector string for selecting the nodes to be used as pages\n\n---\n\n### `anchors`\n###### type: `Array`\n###### default: `undefined`\n\nAn array of strings to use as the page anchors. Make sure the number of anchors used is equal to the number of pages.\n\n---\n\n### `pips`\n###### type: `Boolean`\n###### default: `true`\n\nDisplays the navigation pips.\n\n---\n\n### `animation`\n###### type: `Number`\n###### default: `300`\n\nSets the scroll animation duration. Set to `0` to disable animation.\n\n**NOTE: This option was known as `interval` in versions prior to `v0.5.0`**\n\n---\n\n### `delay`\n###### type: `Number`\n###### default: `0`\n\nSets the delay in `ms` before the scroll animation starts.\n\n---\n\n### `swipeThreshold`\n###### type: `Number`\n###### default: `50`\n\nSets the swipe / mouse drag distance in `px` before firing the page change event. If drag / swipe distance is below this threshold then scrolling will not activate.\n\n---\n\n### `freeScroll`\n###### type: `Boolean`\n###### default: `false`\n\nSets the ability to drag / scroll freely instead of snapping to the next page.\n\n---\n\n### `infinite`\n###### type: `Boolean`\n###### default: `false`\n\nAllow seamless continuous scrolling.\n\n---\n\n### `orientation`\n###### type: `String`\n###### default: `'vertical'`\n\nSets the orientation of the instance. Either `'vertical'` or `'horizontal'`.\n\n---\n\n### `throttle`\n###### type: `Number`\n###### default: `50`\n\nSets the interval in `ms` that the resize callback is fired.\n\n---\n\n### `navPrevEl`\n###### type: `String|HTMLElement`\n###### default: `false`\n\nDefine an element to use to scroll to the previous page. A valid CSS3 selector string or Element reference.\n\n---\n\n### `navNextEl`\n###### type: `String|HTMLElement`\n###### default: `false`\n\nDefine an element to use to scroll to the next page. A valid CSS3 selector string or Element reference.\n\n---\n\n### `slideshow`\n###### type: `Object`\n###### default: `false`\n\nEnables the slideshow function that cycles through your pages automatically.\n\nThe object has two properties to further customise the slidewhow:\n\n* `interval` - length of time in `ms` to display each page.\n* `delay` -  delay in `ms` after the interval has ended and before changing page.\n\n---\n\n### `events`\n###### type: `Object`\n\nDefine the allowed events.\n\n* `wheel` -  enable / disable mousewheel scrolling\n* `mouse` -  enable / disable mouse drag scrolling\n* `touch` -  enable / disable touch / swipe scrolling\n* `keydown` -  enable / disable keyboard navigation\n\nAll properties are set to `true` by default.\n\n---\n\n### `easing`\n###### type: `Function`\n\nDefine the easing function used for the scroll animation.\n\nThe function takes four `arguments`:\n\n```javascript\nfunction(currentTime, startPos, endPos, interval) {\n    // the default easing function\n    return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;\n}\n```  \n\n* `currentTime` - The current time in `ms`\n* `startPos` - The start position in `px`\n* `endPos` - The end position in `px`\n* `interval` - The duration of the animation in `ms`\n\n---\n\n### `onInit`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called when the instance is fully rendered and ready for use.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n```javascript\nnew Pageable(\"#container\", {\n    onInit: function(data) {\n        // data.index, data.scrolled, data.max\n    }\n});\n```\n\n---\n\n### `onUpdate`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called when the instance updates.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n---\n\n### `onBeforeStart`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called before scrolling begins.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n---\n\n### `onStart`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called when scrolling begins.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n---\n\n### `onScroll`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called while scrolling.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n---\n\n### `onFinish`\n###### type: `Function`\n###### default: `noop`\n\nDefine a callback to be called when scrolling finishes.\n\nThe function takes a single argument that returns the data object (See [Custom Events](#custom-events))\n\n---\n\n## Methods\n\n### `destroy()`\nDestroy the instance.\n\nThis will remove all event listeners and return the DOM to it's initial state.\n```javascript\npageable.destroy();\n```\n\n---\n\n### `init()`\nInitialise the instance after destroying.\n```javascript\npageable.init();\n```\n\n---\n\n### `next()`\nScroll to next page.\n```javascript\npageable.next();\n```\n\n---\n\n### `prev()`\nScroll to previous page.\n```javascript\npageable.prev();\n```\n\n---\n\n### `scrollToPage([page])`\nScroll to defined page number.\n```javascript\n// scroll to page 3\npageable.scrollToPage(3);\n```\n\n---\n\n### `scrollToAnchor([anchor])`\nScroll to defined anchor.\n```javascript\npageable.scrollToAnchor(\"#myanchor\");\n```\n\n---\n\n### `orientate([orientation])`\nOrientate the instance to either vertical or horizontal.\n```javascript\npageable.orientate(\"horizontal\");\n// or\npageable.orientate(\"vertical\");\n```\n\n---\n\n### `slideshow()`\nReturns an instance of the slideshow. This requires the `slideshow` option to be set to `true` (`v0.4.0` and above).\n\nThe sideshow instance has two methods:\n* `start()` - starts / resumes the slideshow\n* `stop()` - stops / pauses the slideshow\n\n```javascript\n// stop / pause slideshow\npageable.slideshow().stop();\n\n// start / resume slideshow\npageable.slideshow().start();\n```\n\n---\n\n### `on([event, [callback]])`\nAdd custom event listener. See [Custom Events](#custom-events)\n\n---\n\n### `off([event, [callback]])`\nremove custom event listener. See [Custom Events](#custom-events)\n\n---\n\n## Custom Events\n\nYou can listen to Pageable's custom events with the `on(type, callback)` method.\n\nThe callback has one argument which returns the data object:\n```javascript\n{\n    index: // the current page index\n    scrolled: // the current scroll offset\n    max: // the maximum scroll amount possible\n    percent: // the scroll position as a percentage of the maximum scroll (v0.6.7 and above)\n}\n```\n\nThe `percent` property can be helpful when adding progress indicators (see [Adding Progress Bars](https://mobius1.github.io/Pageable/progress.html)).\n\n### Examples\n```javascript\nconst pages = new Pageable(\"#container\");\n\npages.on(\"init\", data =\u003e {\n    // do something when the instance is ready\n});\n\npages.on(\"update\", data =\u003e {\n    // do something when the instance is updated\n    \n    // this event also fires when the screen size changes\n});\n\npages.on(\"scroll.before\", data =\u003e {\n    // do something before scrolling starts\n    \n    // this event will fire when the defined delay begins\n    \n    // e.g. if the delay is set to 400, this event will\n    // fire 400ms BEFORE the \"scroll.start\" event fires    \n});\n\npages.on(\"scroll.start\", data =\u003e {\n    // do something when scrolling starts\n    \n    // this event will fire when the defined delay ends\n    \n    // e.g. if the delay is set to 400, this event will\n    // fire 400ms AFTER the \"scroll.before\" event fires\n});\n\npages.on(\"scroll\", data =\u003e {\n    // do something during scroll\n});\n\npages.on(\"scroll.end\", data =\u003e {\n    // do something when scrolling ends\n});\n```\n\n---\n\nIf this project helps you then you can grab me a coffee or beer to say thanks.\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=42AR2ZMBHWVTW\u0026source=url)\n\n---\n\nCopyright © 2018 Karl Saunders | BSD \u0026 MIT license\n","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=42AR2ZMBHWVTW\u0026source=url"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMobius1%2FPageable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMobius1%2FPageable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMobius1%2FPageable/lists"}