https://github.com/bioforestchain/scroll-snap
the layout chang event will be emited when you use the scroll snap
https://github.com/bioforestchain/scroll-snap
Last synced: 5 months ago
JSON representation
the layout chang event will be emited when you use the scroll snap
- Host: GitHub
- URL: https://github.com/bioforestchain/scroll-snap
- Owner: BioforestChain
- License: mit
- Created: 2021-09-17T06:28:30.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-29T11:30:18.000Z (about 4 years ago)
- Last Synced: 2025-05-19T23:43:21.493Z (9 months ago)
- Language: TypeScript
- Size: 33.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# scroll-Snap - WebComponent
the layout chang event will be emited when you use the scroll snap
## Background
When I discovered that CSS scroll-snap was used, there were no event callbacks when layout were changed. This specification started as a result of that.
## Install
This project uses [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
```sh
$ npm install @bfchain/scroll-snap --save
```
## Usage
```sh
# Remember add attribute`name="scroll-container"` to the element when you use it.
```
## Example Readmes
```sh
.slides {
width: 200px;
height: 300px;
overflow: scroll hidden;
scroll-snap-type: x mandatory;
display: flex;
}
.slide {
height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
flex: none;
}
.slide1 {
width: 100%;
background-color: blanchedalmond;
}
.slide2 {
width: 50px;
background-color: aqua;
}
```
## Maintainers
[@Huiyong-Chen](https://github.com/Huiyong-Chen)。
## License
[MIT](LICENSE) © Huiyong Chen