https://github.com/jamesplease/react-waypoint-issue-108-example
A repository for issue #108 in React Waypoint
https://github.com/jamesplease/react-waypoint-issue-108-example
Last synced: 3 months ago
JSON representation
A repository for issue #108 in React Waypoint
- Host: GitHub
- URL: https://github.com/jamesplease/react-waypoint-issue-108-example
- Owner: jamesplease
- License: mit
- Created: 2016-07-19T03:59:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-19T22:17:12.000Z (almost 9 years ago)
- Last Synced: 2025-02-07T09:41:56.195Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 484 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-waypoint-issue-108-example
This demonstrates [Issue #108](https://github.com/brigade/react-waypoint/issues/108) in React-Waypoint.
### Try it out
1. Clone this repository
2. Run `npm install` from the root directory of the repo
3. Open `index.html` in your browser
4. Scroll around with the console open
### What is the grey square?
The grey square represents the bottom 20% of the viewport. In this example, the `scrollableAncestor` is the window, meaning that the boundaries of React Waypoint will be the viewport boundaries.
However, `topOffset` has been specified as 80%, meaning that the top boundary has been scooted down by that much. This means that only the bottom 80% of the viewport will be the area in which waypoints are considered "inside," which will affect when the enter and leave events are triggered.
### What should I be seeing?
