javascript - jqueryオーバーレイでマウスホイールのスクロールを無効にする方法

Question

マスターページに次のコードがあります。

<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>

スクロール可能な領域で誰かが画像をクリックしたときに呼び出されるオーバーレイがあります。オーバーレイ表示時のスクロールを無効にしたい。そのために、オーバーレイ スクリプトの onBeforeLoad と onClose で、上部のスクロール バーとサムネイルを非表示にします。つまり、カーソルを使用してスクロール バーを移動することはできません。そのコードは次のとおりです。

<script>
    $(document).ready(function () {
        $("img[rel]").overlay({
            onBeforeLoad: function (event) {
                $('.scrollbar').hide("fast");
                $('.thumb').hide("fast");
            },
            onClose: function (event) {
                $('.scrollbar').show();
                $('.thumb').show();
            }
        });
    });
</script>

残念ながら、このシナリオでは、マウスホイールは依然としてスクロール可能な領域をスクロールします。スクリプトでマウスホイールのスクロールを無効にしてから再度有効にして、スクロールバー (または他の場所) を非表示にするにはどうすればよいですか?

ありがとう！