Question

我正在使用基于jQuery的lightbox_me脚本。当您单击打开灯箱的元素时，脚本将删除浏览器滚动条并使内容向右移动，我发现它非常难看。它看起来很麻烦。

我已经设置了一个干净的演示，可以在这里找到：http://lyesdehili.com/LightBox.html

如何停止删除滚动条？

$(function () {
 function launch() {
    $('#sign_up').lightbox_me({
        centered: true,
        onLoad: function () {
            $('#sign_up').find('input:first').focus()
        }
    });
}

$('#try-1').click(function (e) {
    $("#sign_up").lightbox_me({
        centered: true,
        preventScroll: true,
        onLoad: function () {
            $("#sign_up").find("input:first").focus();
        }
    });

    e.preventDefault();
});


$('table tr:nth-child(even)').addClass('stripe');
});


<div style="width:965px; height:1400px; background:#fff">
<p>Scroll down the page to find the  lightbox link</p>
</div>

<a class="try sprited" id="try-1" href="#">Click to open lightbox</a>

<div style="display:none; height:350px; width:400px; background:#ccc;" id="sign_up">
<h3 id="see_id" class="sprited" >Can I see some ID?</h3>
<span>Please sign in using the form below</span>
<div id="sign_up_form">
    <label><strong>Username:</strong> <input class="sprited"/></label>
    <label><strong>Password:</strong> <input class="sprited"/></label>
    <div id="actions">
        <a class="close form_button sprited" id="cancel" href="#">Cancel</a>
        <a class="form_button sprited" id="log_in" href="#">Sign in</a>
    </div>
</div>
<h3 id="left_out" class="sprited">Feeling left out?</h3>
<span>Don't be sad, just <a href="#">click here</a> to sign up!</span>
<a id="close_x" class="close sprited" href="#">close</a>
 </div>

Answer 1

Lightbox脚本将overflow: hidden添加到<body>元素。

将body { overflow: scroll !important; }添加到CSS应解决此问题。

更新：

如果您只想将其添加到脚本中，它将被添加到灯箱功能中：

$("#sign_up").lightbox_me({ centered: true, preventScroll: true, onLoad: function () { $("#sign_up").find("input:first").focus(); $('body').style('overflow', 'scroll', 'important'); } });

如何防止Lightbox_me脚本删除浏览器滚动条？

1 个答案: