one-page-scroll
Advanced tools
An easy javascipt library used to create the fullscreen scroll pages.
It has full support the mouse, keyboard and touch event.
Just add the script file before end of body.
<body>
<section name="page1"></section>
<section name="page2"></section>
<section></section>
<section name="page4"></section>
...
<script src="https://unpkg.com/one-page-scroll/one-page-scroll.min.js"></script>
</body>
Then call it new onePageScroll({options}) .
document.addEventListener('DOMContentLoaded', function() {
var app = new onePageScroll({
el: document.querySelectorAll('section');
})
})
That's all.
You can .next(), .prev() and .goto(n) to control page by script.
While page changed, the element will be dispatched a event inview or outview.
So you can do any thing when users or you change the page like this.
el.addEventListener('inview', function(e) {
// do something
})
one-page-scroll has 4 options.
{
el, // NodeList - the page elements, required
time, // Number - the animation time(ms), default: 600
easing, // String - CSS animation easing, default: ease-out
loop, // Boolean - loop pages(only the last page to the first page), default: false
throttling // number - the time you want to invoke user to scroll a page at most once
}
You can change the last 3 options any times. just app.easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
one-page-scroll support the lastest Chrome, Firefox, Edge and Safari.
Add polyfill before one-page-scroll to support IE > 9.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Array.prototype.findIndex,Array.prototype.includes,Array.prototype.forEach,CustomEvent"></script>
<script type="module">
import OnePageScroll from '//unpkg.com/one-page-scroll/one-page-scroll.esm.js'
const app = new OnePageScroll(options)
</script>
$ npm install
$ npm run build
huihuimoe ©, Released under the MIT License.
FAQs
A simple One Page Scroll plugin.
We found that one-page-scroll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Newer packages in this compromise use native extensions and .pth loaders to execute JavaScript stealers in developer environments.
Research
Socket found 37 malicious PyPI wheels that abuse Python startup hooks to launch a Bun-powered credential stealer tied to Mini Shai-Hulud/Miasma.
Security News
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.