Search jQuery

jQuery Forum

afterscroll event

in Getting Started • 11 years ago

<script>
$(function(){
$("#movie_grid").afterScroll(function(){
//actions...
})
})
</script>
<div id="movie_grid">
<div id="unvisible_grid_top" style="height: 0px; " ></div>
<div id="visible_grid" style="height: 768px; "></div>
<div id="unvisible_grid_bottom" style="height: 2400px; "></div>
</div>

I would like to have a jquery event "afterScroll". So when a user is stops scroll for 800 milliseconds some code is be triggered.

On the internet I found some javascript code (see under). How can I make a jQuery event from this code?

<head>
<title>doAfterScroll Example</title>
<style type="text/css">
body div {
height: 2000px;
padding: 100px
}
</style>
<!-- the following script part
can be externalized in some javascript file -->
<script type="text/javascript">
var doAfterScroll = (function(){
// Configure
var SCROLL_DELAY = 1000;
// Do not edit the following
var baseId = 0, scrollId = 0, currentlyScrolling = false, funcs = [];
// --- Init ---
addEvent(window, "onscroll", function(evt){
// update the scroll identifier
scrollId = new Date().getTime();
if (!currentlyScrolling) { //Scroll has just started
// set the info
currentlyScrolling = true;
// Launch the watch process
setTimeout(function(){
if (scrollId == baseId) { // Scrolling has stopped
// set the info
currentlyScrolling = false;
// Execute the registered handlers
for (var ii = funcs.length; ii--;)
funcs[ii]();
}
else { // Still scrolling
// set a milestone
baseId = scrollId;
// wait
setTimeout(arguments.callee, SCROLL_DELAY);
}
}, SCROLL_DELAY);
}
else {
// a process has already been launched
// and is waiting to be completed
// - Do nothing
}
});
// --- return the registering function ---
return function(func){
funcs.push(func);
}
// --- Helpers ---
function addEvent(obj, evt, func){
if (obj[evt]) {
obj[evt] = (function(handler){
return function(evt){
func.call(this, evt);
return handler.call(this, evt);
}
})(obj[evt]);
}
else {
obj[evt] = func;
}
}
})();
</script>
<script type="text/javascript">
window.onload = function(evt){
doAfterScroll(function(){
document.body.firstChild.innerHTML = "Scrolled at " + new Date();
});
}
</script>
</head>
<body>
<div>
Hello, World !
</div>
</body>

source

Response title

Attachments

jQuery Forum

afterscroll event

Statistics

Tags

Actions