用fancybox slide防止垂直滚动条滑动
Prevent vertical scrollbar from sliding with fancybox slides
我遇到了一个问题,即浏览器的垂直滚动条(如果可见)会在幻灯片事件期间与 fancybox 幻灯片一起移动。如果您 运行 代码片段,请调整高度以使垂直滚动条可见,然后单击 next/previous fancybox 按钮观察滚动条的滑动行为。
$(".fancybox").fancybox({
type: "inline",
speed: 2000
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 1</a><br>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 2</a>
<div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;">
<h3>Login to Join The Community</h3>
<p>This is a sample login form, but you may put any HTML here.</p>
</div>
</body>
</html>
这是一个错误吗?关于解决方法的任何想法?我尝试了 hiding/showing 幻灯片转换前后的滚动条,但这没有用:
$(".fancybox").fancybox({
type: "inline",
speed: 2000,
beforeMove: function (instance, slide) {
document.body.style.overflow = "hidden";
},
afterMove: function (instance, slide) {
document.body.style.overflow = "";
}
});
经过一些调整后,我设法找到了这个解决方案,尽管我不确定是否有更好的解决方案,它涉及访问实际幻灯片(和上一张幻灯片)的元素和 hiding/showing 它们的滚动条 CSS overflow
:
$(".fancybox").fancybox({
type: "inline",
beforeMove: function (instance, slide) {
// Hide scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "hidden");
slide.$slide.css("overflow", "hidden");
},
afterMove: function (instance, slide) {
// Restore scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "");
slide.$slide.css("overflow", "");
}
});
我遇到了一个问题,即浏览器的垂直滚动条(如果可见)会在幻灯片事件期间与 fancybox 幻灯片一起移动。如果您 运行 代码片段,请调整高度以使垂直滚动条可见,然后单击 next/previous fancybox 按钮观察滚动条的滑动行为。
$(".fancybox").fancybox({
type: "inline",
speed: 2000
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 1</a><br>
<a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 2</a>
<div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;">
<h3>Login to Join The Community</h3>
<p>This is a sample login form, but you may put any HTML here.</p>
</div>
</body>
</html>
这是一个错误吗?关于解决方法的任何想法?我尝试了 hiding/showing 幻灯片转换前后的滚动条,但这没有用:
$(".fancybox").fancybox({
type: "inline",
speed: 2000,
beforeMove: function (instance, slide) {
document.body.style.overflow = "hidden";
},
afterMove: function (instance, slide) {
document.body.style.overflow = "";
}
});
经过一些调整后,我设法找到了这个解决方案,尽管我不确定是否有更好的解决方案,它涉及访问实际幻灯片(和上一张幻灯片)的元素和 hiding/showing 它们的滚动条 CSS overflow
:
$(".fancybox").fancybox({
type: "inline",
beforeMove: function (instance, slide) {
// Hide scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "hidden");
slide.$slide.css("overflow", "hidden");
},
afterMove: function (instance, slide) {
// Restore scrollbar for fancybox bug fix
instance.slides[instance.prevIndex].$slide.css("overflow", "");
slide.$slide.css("overflow", "");
}
});