0.1.3 • Published 5 years ago
@hawezo/autoscroll.js v0.1.3
autoscroll.js
Settings
Options | Default | Description |
---|---|---|
debug | false | Enables console debugging. |
scrollDuration | 800 | The duration in milliseconds of the scroll animation. |
forceFit | false | Enable to force a section to fit. |
offset | 0 | The offset of the section scroll. |
beforeScrollCallback | undefined | A callback that will be called right before a scroll. If it returns false, the scroll will not happen. |
scrollCallback | undefined | A callback that will be called right after a scroll. |
nextSectionVisibilityThresold | 15 | If forceFit is disabled, this options defines the needed percentage of visibility a section must have to be automatically scrolled to. |
fitToScreen | false | Will set the height of all sections to the height of the current viewport. |
Usage
As a script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../dist/autoscroll.js"></script>
<script>
autoscroll({
scrollDuration: 1000,
debug: true,
forceFit: true,
fitToScreen: true,
sections: {
div1: {
targetDown: 'div2',
targetUp: 'div1',
id: '#div1',
},
div2: {
targetDown: 'div3',
targetUp: 'div1',
id: '#div2',
},
div3: {
targetDown: 'div3',
targetUp: 'div2',
id: '#div3',
}
}
});
</script>
With import
import autoscroll from '@hawezo/autoscroll.js';
const autoscroll = autoscroll({
scrollDuration: 1000,
debug: true,
forceFit: true,
fitToScreen: true,
sections: {
div1: {
targetDown: 'div2',
targetUp: 'div1',
id: '#div1',
},
div2: {
targetDown: 'div3',
targetUp: 'div1',
id: '#div2',
},
div3: {
targetDown: 'div3',
targetUp: 'div2',
id: '#div3',
}
}
});
Example HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>autoscroll.js</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<body>
<section id="div1" style="height: 100vh; background-color: red;">
</section>
<section id="div2" style="height: 100vh; background-color: green;">
</section>
<section id="div3" style="height: 100vh; background-color: blue;">
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../dist/autoscroll.js"></script>
<script>
autoscroll({
scrollDuration: 1000,
debug: true,
forceFit: true,
fitToScreen: true,
sections: {
div1: {
targetDown: 'div2',
targetUp: 'div1',
id: '#div1',
},
div2: {
targetDown: 'div3',
targetUp: 'div1',
id: '#div2',
},
div3: {
targetDown: 'div3',
targetUp: 'div2',
id: '#div3',
}
}
})
</script>
</body>
</body>
</html>