Scrollbar disappears on postback

[ShadowFax]

I have implemented the LivePipe scrollbar on one of my user controls
programatically using Literal Controls. Here is a snippet of the
implementation :

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
_updatePanel1 = new UpdatePanel
{
ID =
"udpMeasureControlEntitlements",
UpdateMode =
UpdatePanelUpdateMode.Conditional,
ChildrenAsTriggers = true
};
var entitlementListStart = new LiteralControl("<div id=
\"scrollbar_container\" class = \"scrollbar_container\"><div id=
\"scrollbar_content\" class = \"scrollbar_content\">");
var entitlementListEnd = new LiteralControl("</div><div id=
\"scrollbar_track\" class = \"scrollbar_track\"><div id=
\"scrollbar_handle\" class = \"scrollbar_handle\"></div></div></
div>");
var entitlementHdr = new LiteralControl("<span class=
\"EntitlementHeader\">Entitlements</span>");

_updatePanel1.ContentTemplateContainer.Controls.Add(entitlementHdr);

_updatePanel1.ContentTemplateContainer.Controls.Add(entitlementListStart);

_updatePanel1.ContentTemplateContainer.Controls.Add(CreateMainTable());

_updatePanel1.ContentTemplateContainer.Controls.Add(entitlementListEnd);
Controls.Add(_updatePanel1);

_updatePanel1.Update();
}

I have included references to the following javascript:

FILES : 1. <script src="/javascripts/all.js?1256410438" type="text/
javascript"></script>
2. The source code available at :
http://github.com/syntacticx/livepipe-ui/tree/master/src/scrollbar.js

and the following script:

var scrollbar = new
Control.ScrollBar('scrollbar_content','scrollbar_track');

$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
});

$('scroll_up_50').observe('click',function(event){
scrollbar.scrollBy(50);
event.stop();
});

$('scroll_top').observe('click',function(event){
scrollbar.scrollTo('top');
event.stop();
});

$('scroll_bottom').observe('click',function(event){
//to animate a scroll operation you can pass true
//or a callback that will be called when scrolling is complete
scrollbar.scrollTo('bottom',function(){
if(typeof(console) != "undefined")
console.log('Finished scrolling to bottom.');
});
event.stop();
});

$('scroll_second').observe('click',function(event){
//you can pass a number or element to scroll to
//if you pass an element, it will be centered, unless it is
//near the bottom of the container
scrollbar.scrollTo($('second_subhead'));
event.stop();
});

$('scroll_third').observe('click',function(event){
//passing true will animate the scroll
scrollbar.scrollTo($('third_subhead'),true);
event.stop();
});

$('scroll_insert').observe('click',function(event){
$('scrollbar_content').insert('<p><b>Inserted: ' + $
('repeat').innerHTML + '</b></p>');
//you only need to call this if ajax or dom operations modify the
layout
//this is automatically called when the window resizes
scrollbar.recalculateLayout();
event.stop();
});

Please pardon me if I may have made any silly mistakes. Could anyone
please throw light as to why the scroll handle becomes invisible upon
post back? I am using an update panel here. I tried looking at the
page source code after postback, and I can still see the div tag for
handle is generated. However, it is not visible. Any ideas?