I have this code in a master page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="/Scripts/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#scrollbar2').tinyscrollbar();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="rightContent" runat="server">
<div id="rightContentWrapper">
<div id="sectionTitle">Investments</div>
<div id="introText">Test Investments List</div>
<div id="scrollbar2">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<div id="tombStones">
<%-- some scrollable images with overlays when clicked--%>
</div>
</div>
</div>
</div>
</div>
</asp:content>
I have overlays that are invoked when someone clicks an image in the scrollable area. I want to disable scrolling when the overlay appears. To do that, in the onBeforeLoad and onClose of the overlay script, I hide the scrollbar and thumbnail at the top, which means you can't use the cursor to move the scrollbar. Here is that code:
<script>
$(document).ready(function () {
$("img[rel]").overlay({
onBeforeLoad: function (event) {
$('.scrollbar').hide("fast");
$('.thumb').hide("fast");
},
onClose: function (event) {
$('.scrollbar').show();
$('.thumb').show();
}
});
});
</script>
Unfortunately, in this scenario, the mousewheel still scrolls the scrollable area. How can I disable and re-enable mousewheel scrolling in my script to hide the scrollbar (or elsewhere)?
Thanks!