itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 22:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
htmx/test/manual/intersect-test-eventHandler.html
carson f6efc4a8c3 add intersect event for intersection observer 
supports the `root` and `threshold` config variables
2021-05-18 13:19:03 -06:00

155 lines
9.3 KiB
HTML
Raw Blame History

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Scroll Event Handler</title>
<script src="../../node_modules/sinon/pkg/sinon.js"></script>
<script src="../util/util.js"></script>
<script src="../../src/htmx.js"></script>
<script>
server = makeServer();
server.autoRespond = true;
server.respondWith("GET", "/more_content", "Here is more content for this page, loaded 'remotely'.");
</script>
<style>
.panel {
height:200px;
background-color:#eee;
margin-bottom:20px;
padding:20px;
}
</style>
</head>
<body style="padding:20px;font-family: sans-serif">
<h1>Scrolling Event Handler Tests</h1>
<p>You should be able to scroll this page at any speed and see HTML fragments loaded into the DIVs "remotely" without any hiccups.</p>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<h1>Threshold .5</h1>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
<h1>Threshold 1</h1>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
<h1>Regular</h1>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink