react-visibility-sensor
Version:
Sensor component for React that notifies you when it goes in or out of the window viewport.
86 lines (75 loc) • 2.03 kB
HTML
<html>
<head>
<style>
body {
min-height: 1000px;
}
#example {
height: 100px;
}
.msg {
position: fixed;
top: 20px;
left: 10px;
}
.sensor {
display: block;
width: 50px;
height: 50px;
background: red;
}
#example-container {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
position: relative;
}
#example-container .inner {
width: 800px;
height: 800px;
}
#example-container .sensor {
position: absolute;
left: 400px;
top: 400px;
}
#example-container .msg {
top: 40px;
}
#example-container .msg:before {
content: 'Contained ';
}
#info {
position: fixed;
z-index: 1;
top: 10px;
right: 10px;
width: 400px;
}
#foreground {
position: relative;
z-index: 2;
background: #FFF;
width: 300px;
}
</style>
</head>
<body>
<div id="info">
<p>In this example, the first element's visibility will change as you scroll the page. The second element uses the `containment` prop to tell whether it is within the visible part of the container. Scroll around to see it change.</p>
<p>Note that the "Contained Element" in this example is also using the <code>`partialVisibility`</code> prop. So it will be considered "visible" if even part of it is within the viewport.</p>
</div>
<div id="foreground">
<div id="example"></div>
<div id="example-container">
<div class="inner"></div>
</div>
</div>
<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-visibility-sensor@3.2.1/dist/visibility-sensor.min.js"></script>
<script src="./main.js"></script>
</body>
</html>