How to use

html class "pageWrapper" > "page" pageWrapper id === page classList[0] Page have fixed position and 100% height Content of page can have varying width and height

#Never delete the pageWrapper nor page IT WILL BROKE THE APPLICATION use display: none instead Never delete INDEX CLASS & ID INDEX --> page & page wrapper

onresize run update (optional) When jump scroll can use scrollToAdd (optional) Run script after DOM loaded (best practice)

MANDATORY CSS

Automatically Appended

body, html { position: relative; }

.page { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; visibility: hidden; }

.page.active { visibility: visible; }

.page:not(.active) * { animation-play-state: paused; display: none; }

.pageWrapper { position: relative; width: 100%; background-color: transparent; }

Example site that use the library

Web1 Web2