问题
Have a look at the following code (additionally, you will need jquery.js, jquery.viewport.js and jquery.scrollTo.js).
The behaviour I would expect from this script is that whenever I scroll the page, the red rows (<tr> elements with class alwaysVisible) should be inserted just underneath the top-most visible row (<tr> element) of that table. Then, the page should be scrolled so that the first of these red rows appears "exactly" at the top of the viewport. What actually happens is that makeVisibleWhatMust(); is called repeatedly until I reach the end of the page. I thought $(window).unbind('scroll'); would keep makeVisibleWhatMust(); from being called again, but apparently this doesn't work.
Any ideas why?
Here is the JavaScript I wrote:
function makeVisibleWhatMust()
{
$('#testContainer').text( $('#testContainer').text() + 'called\n');
$('table.scrollTable').each
(
function()
{
var table = this;
$($('tr.alwaysVisible', table).get().reverse()).each
(
function()
{
$(this).insertAfter( $('tr:in-viewport:not(.alwaysVisible)', table)[0] );
}
);
$(window).unbind('scroll');
$(window).scrollTo( $('tr.alwaysVisible')[0] );
$(window).bind('scroll', makeVisibleWhatMust);
}
);
}
$(document).ready
(
function()
{
$(window).bind('scroll', makeVisibleWhatMust);
}
);
And here is an HTML page to test it on:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Tables Test Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<script type="text/javascript" src="scrollTable.js"></script>
<style type="text/css">
table th, table td
{
border: 1px solid #000;
padding: .3em;
}
.alwaysVisible
{
background: #F66;
}
</style>
</head>
<body>
<table class="scrollTable">
<thead>
<tr class="alwaysVisible">
<th>Row name</th>
<th>Content</th>
</tr>
<tr class="alwaysVisible">
<th>Row 2</th>
<th>Row 2</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
for(var i = 0; i < 50; ++i)
{
document.writeln("<tr><td>Row " + i + "</td><td>Content</td></tr>");
}
</script>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
<div id="testContainer">TEST CONTAINER</div>
</body>
</html>
回答1:
I think you're problem is that scrollTo uses animate:
// From the plugin's source
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
And animate uses a timer to perform the animation. The result is that .scrollTo will return before the scrolling has completed and you'll rebind your scroll handler while the scrollTo is still scrolling. Hence the events when you're not expecting them.
An easy solution would be to use a flag to tell makeVisibleWhatMust that scrollTo is scrolling and use a scrollTo callback to clear the flag when it is done, something like this:
function makeVisibleWhatMust() {
// Ignore the event if we're doing the scrolling.
if(makeVisibleWhatMust.isScrolling)
return;
$('#testContainer').text( $('#testContainer').text() + 'called\n');
$('table.scrollTable').each(function() {
var table = this;
$($('tr.alwaysVisible', table).get().reverse()).each(function() {
$(this).insertAfter( $('tr:in-viewport:not(.alwaysVisible)', table)[0] );
});
makeVisibleWhatMust.isScrolling = true;
$(window).scrollTo($('tr.alwaysVisible')[0], {
onAfter: function() { makeVisibleWhatMust.isScrolling = false; }
});
}
);
}
makeVisibleWhatMust.isScrolling = false;
And here's a live version that seems to work: http://jsfiddle.net/ambiguous/ZEx6M/1/
来源：https://stackoverflow.com/questions/6206985/what-can-make-jquerys-unbind-function-not-work-as-expected