如何使用jquery覆盖禁用鼠标滚轮滚动

时间:2013-03-26 15:56:40

标签: javascript jquery scroll overlay mousewheel

我在母版页中有这段代码:

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

不幸的是,在这种情况下,鼠标滚轮仍然滚动可滚动区域。如何在我的脚本中禁用和重新启用鼠标滚轮以隐藏滚动条(或其他地方)?

谢谢!

0 个答案:

没有答案