mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +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 + "]"
|
return "[hx-" + verb + "], [data-hx-" + verb + "]"
|
||||||
}).join(", ");
|
}).join(", ");
|
||||||
|
|
||||||
|
var windowIsScrolling = false // used by initScrollHandler
|
||||||
|
|
||||||
//====================================================================
|
//====================================================================
|
||||||
// Utilities
|
// Utilities
|
||||||
//====================================================================
|
//====================================================================
|
||||||
@ -765,13 +767,20 @@ return (function () {
|
|||||||
function initScrollHandler() {
|
function initScrollHandler() {
|
||||||
if (!window['htmxScrollHandler']) {
|
if (!window['htmxScrollHandler']) {
|
||||||
var scrollHandler = function() {
|
var scrollHandler = function() {
|
||||||
forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
|
windowIsScrolling = true
|
||||||
maybeReveal(elt);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
window['htmxScrollHandler'] = scrollHandler;
|
window['htmxScrollHandler'] = scrollHandler;
|
||||||
window.addEventListener("scroll", 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) {
|
function maybeReveal(elt) {
|
||||||
|
|||||||
@ -37,7 +37,10 @@
|
|||||||
<a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a>
|
<a href="manual/confirm-and-prompt.html">Confirm & Prompt Test</a>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</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.autoRespond = true;
|
||||||
server.respondWith("GET", "/more_divs", "<div>More Content</div>");
|
server.respondWith("GET", "/more_divs", "<div>More Content</div>");
|
||||||
</script>
|
</script>
|
||||||
<h1>Prompt & Confirm Tests</h1>
|
<h1>Scrolling Start/End Tests</h1>
|
||||||
|
|
||||||
<h3>End</h3>
|
<h3>End</h3>
|
||||||
<div hx-get="/more_divs" hx-swap="beforeend scroll:bottom" style="height: 100px; overflow: scroll">
|
<div hx-get="/more_divs" hx-swap="beforeend scroll:bottom" style="height: 100px; overflow: scroll">
|
||||||
Loading…
x
Reference in New Issue
Block a user