https://github.com/techfever-soft/ngx-spa-support
Helper to scroll anchors in single page apps
https://github.com/techfever-soft/ngx-spa-support
angular scrolling singlepageapplication
Last synced: 3 months ago
JSON representation
Helper to scroll anchors in single page apps
- Host: GitHub
- URL: https://github.com/techfever-soft/ngx-spa-support
- Owner: techfever-soft
- Created: 2023-08-26T21:52:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T14:37:16.000Z (9 months ago)
- Last Synced: 2025-01-21T09:48:42.260Z (4 months ago)
- Topics: angular, scrolling, singlepageapplication
- Language: TypeScript
- Homepage: https://ngx-spa-support.web.app/
- Size: 136 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📲 ngx-spa-support
A package to help you to build more easily single page applications, using scroll anchors.
#
 
# Demo
[SEE DEMO](https://ngx-spa-support.web.app/)
# Features
- [x] Anchor scrolling
- [x] Menu scroll-spy
- [x] Dynamic anchors
- [x] Scroll snapping
- [ ] Keyboard navigation
- [ ] Section horizontal scrolling
- [ ] Menu horizontal scrolling
- [ ] Custom transitions
- [ ] Infinite scroll
# Basic example
Template part
```
{{ section | json }}
```
TypeScript
```
public spaConfig: NgxSpaSupportConfig = {
menu: [
{
link: 'mySection1',
active: false,
removable: false,
data: {
label: 'My first section',
},
},
{
link: 'mySection2',
active: true,
removable: true,
data: {
label: 'My second section',
},
},
],
scrollBehavior: 'smooth',
sectionDetectionSize: 250,
scrollOnCreated: true,
scrollSnapping: true,
};
constructor(
private spaService: NgxSpaSupportService
) {
this.spaService
.getMenuItems()
.subscribe((menuItems: NgxSpaSupportMenuItem[]) => {
this.menuItems = menuItems;
});
}
```
Style part (SCSS)
```
* {
clear: both;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
ngx-spa-support {
ngx-spa-support-menu {
position: fixed;
top: 100px;
a.active {
background: blue;
color: #fff;
}
}
ngx-spa-support-scrollable {
display: block;
height: 100%;
overflow: auto;
section {
height: 100%;
&:nth-child(1) {
background: #858585;
}
&:nth-child(2) {
background: #afafaf;
}
&:nth-child(n + 3) {
background: #dddddd;
}
}
}
}
```