我正在使用基于 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>
最佳答案
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');
}
});
关于javascript - 如何防止 Lightbox_me 脚本删除浏览器滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22870311/