mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 07:21:05 +00:00
Merge pull request #182 from benpate/pullrequest-scroll-event-throttling
Pullrequest scroll event throttling
This commit is contained in:
1cg
GitHub
commit
6227f1ae13
15
src/htmx.js
15
src/htmx.js
@ -57,6 +57,8 @@ return (function () {
|
||||
return "[hx-" + verb + "], [data-hx-" + verb + "]"
|
||||
}).join(", ");
|
||||
|
||||
var windowIsScrolling = false // used by initScrollHandler
|
||||
|
||||
//====================================================================
|
||||
// Utilities
|
||||
//====================================================================
|
||||
@ -765,13 +767,20 @@ return (function () {
|
||||
function initScrollHandler() {
|
||||
if (!window['htmxScrollHandler']) {
|
||||
var scrollHandler = function() {
|
||||
forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
|
||||
maybeReveal(elt);
|
||||
});
|
||||
windowIsScrolling = true
|
||||
};
|
||||
window['htmxScrollHandler'] = scrollHandler;
|
||||
window.addEventListener("scroll", scrollHandler)
|
||||
}
|
||||
|
||||
setInterval(function() {
|
||||
if (windowIsScrolling) {
|
||||
windowIsScrolling = false;
|
||||
forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
|
||||
maybeReveal(elt);
|
||||
})
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function maybeReveal(elt) {
|
||||
|
||||
@ -37,7 +37,10 @@
|
||||
<a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="manual/scroll-tests.html">Scroll Test</a>
|
||||
<a href="manual/scroll-test-startEnd.html">Scroll Test 1 - Start/End</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="manual/scroll-test-eventHandler.html">Scroll Test 2 - Event Handler</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
107
test/manual/scroll-test-eventHandler.html
Normal file
107
test/manual/scroll-test-eventHandler.html
Normal file
@ -0,0 +1,107 @@
|
||||
<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="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -13,7 +13,7 @@
|
||||
server.autoRespond = true;
|
||||
server.respondWith("GET", "/more_divs", "<div>More Content</div>");
|
||||
</script>
|
||||
<h1>Prompt & Confirm Tests</h1>
|
||||
<h1>Scrolling Start/End Tests</h1>
|
||||
|
||||
<h3>End</h3>
|
||||
<div hx-get="/more_divs" hx-swap="beforeend scroll:bottom" style="height: 100px; overflow: scroll">
|
||||
Loading…
x
Reference in New Issue
Block a user