diff --git a/README.md b/README.md
index 0aab8c6c9b..778279d41b 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
|-----------------|-----------------|-----------------|-----------------|--------------------|
| ✓ Button | ✓ Breadcrumb | ✓ Advertisement | ✓ Accordion | Form Validation |
| ✓ Container | ✓ Form | ✓ Card | ✓ Checkbox | *API (NA)* |
-| ✓ Divider | ✓ Grid | ✓ Comment | ✓ Dimmer | ✓ Visibility (NA) |
+| ✓ Divider | ✓ Grid | ✓ Comment | ✓ Dimmer | ✓ Visibility |
| ✓ Flag | ✓ Menu | ✓ Feed | ✓ Dropdown | |
| ✓ Header | ✓ Message | ✓ Item | ✓ Embed | |
| ✓ Icon | ✓ Table | ✓ Statistic | ✓ Modal | |
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
index 1193681e9c..6de8036b8f 100644
--- a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
+++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
@@ -4,6 +4,7 @@ import { Divider, Grid, Image, Table, Segment, Visibility } from 'semantic-ui-re
export default class VisibilityExampleFireOnMount extends Component {
state = {
calculations: {
+ direction: 'none',
height: 0,
width: 0,
topPassed: false,
@@ -55,6 +56,10 @@ export default class VisibilityExampleFireOnMount extends Component {
+
+ direction
+ {calculations.direction}
+
pixelsPassed
{calculations.pixelsPassed.toFixed()}px
diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
index 418c85f676..879799652d 100644
--- a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
+++ b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
@@ -6,6 +6,7 @@ import Wireframe from '../Wireframe'
export default class VisibilityExampleVisibility extends Component {
state = {
calculations: {
+ direction: 'none',
height: 0,
width: 0,
topPassed: false,
@@ -47,6 +48,10 @@ export default class VisibilityExampleVisibility extends Component {
+
+ direction
+ {calculations.direction}
+
pixelsPassed
{calculations.pixelsPassed.toFixed()}px
diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts
index 9d6b24abf8..b1fba0a916 100644
--- a/src/behaviors/Visibility/Visibility.d.ts
+++ b/src/behaviors/Visibility/Visibility.d.ts
@@ -141,6 +141,7 @@ export interface VisibilityProps {
export interface VisibilityCalculations {
bottomPassed: boolean;
bottomVisible: boolean;
+ direction: 'down' | 'up';
fits: boolean;
height: number;
passing: boolean;
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
index baf82b2ecd..739c5b7ad0 100644
--- a/src/behaviors/Visibility/Visibility.js
+++ b/src/behaviors/Visibility/Visibility.js
@@ -199,7 +199,9 @@ export default class Visibility extends Component {
const { context, fireOnMount } = this.props
+ this.pageYOffset = window.pageYOffset
context.addEventListener('scroll', this.handleScroll)
+
if (fireOnMount) this.update()
}
@@ -272,6 +274,7 @@ export default class Visibility extends Component {
this.oldCalculations = this.calculations
this.calculations = this.computeCalculations()
+ this.pageYOffset = window.pageYOffset
const {
onBottomPassed,
@@ -322,6 +325,7 @@ export default class Visibility extends Component {
const { bottom, height, top, width } = this.ref.getBoundingClientRect()
const [topOffset, bottomOffset] = normalizeOffset(offset)
+ const direction = window.pageYOffset > this.pageYOffset ? 'down' : 'up'
const topPassed = top < topOffset
const bottomPassed = bottom < bottomOffset
@@ -340,6 +344,7 @@ export default class Visibility extends Component {
return {
bottomPassed,
bottomVisible,
+ direction,
fits,
height,
passing,
diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
index ab6d70413d..d40777bc36 100644
--- a/test/specs/behaviors/Visibility/Visibility-test.js
+++ b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -243,6 +243,41 @@ describe('Visibility', () => {
})
})
})
+
+ describe('direction', () => {
+ let pageYOffset
+
+ beforeEach(() => {
+ pageYOffset = window.pageYOffset
+ })
+
+ afterEach(() => {
+ window.pageYOffset = pageYOffset
+ })
+
+ it('returns up when scrolling down', () => {
+ const onUpdate = sandbox.spy()
+ mount()
+
+ window.pageYOffset = 5
+ domEvent.scroll(window)
+ onUpdate.should.have.been.calledWithMatch(null, {
+ calculations: { direction: 'down' },
+ })
+ })
+
+ it('returns up when scrolling up', () => {
+ window.pageYOffset = 100
+ const onUpdate = sandbox.spy()
+ mount()
+
+ window.pageYOffset = 50
+ domEvent.scroll(window)
+ onUpdate.should.have.been.calledWithMatch(null, {
+ calculations: { direction: 'up' },
+ })
+ })
+ })
})
describe('context', () => {