Fancybox - 多个 PDF - 无法在文档中上下滚动

Question

我使用的是 fancybox，但是当我有一组 PDF 图像时，导航箭头允许您在覆盖在 PDF 控件之上的 pdf 文档之间进行切换，从而阻止用户滚动浏览文档等。

我已经创建了一个显示问题的小提琴，我将非常感谢任何帮助。

问候

汤姆

Fiddle Here

<a class="fancybox">Click to show pdf</a>

$(".fancybox").click(function(){
var photoArray = [];
photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });
 photoArray.push({ href: 'http://samplepdf.com/sample.pdf' , type: 'iframe' });


$('.fancy').fancybox();
        $.fancybox.open(photoArray, {
            'openEffect': 'elastic',
            'closeEffect': 'elastic',
            'nextEffect': 'fade',
            'openSpeed': 600,
            'closeSpeed': 200,
                autoSize : false,
                beforeLoad : function() {                    
                    this.width = 1000;  
                    this.height = 800;
                },
                helpers: {
                    overlay: null
                //buttons: {}
            },
                iframe: {
                    preload: false
                }
        });

});

Answer 1

    <style type="text/css">
    .fancybox-prev {
        left: -70px;
        height: 10px;
        width: 10px;
        vertical-align: central;
        top: 50%;
    }

    .fancybox-next {
        right: -70px;
        height: 10px;
        width: 10px;
        top: 50%;
    }

    .fancybox-nav span {
        visibility: visible;
    }
</style>

Answer 2

问题是框的“箭头”覆盖了滚动条。有两种方法：

1) 移除箭头。

只需将其添加到花式框：

"arrows" : false

JSFiddle 显示差异。

2) 设置箭头样式

这需要更多的工作，但您可以尝试移动它们，添加填充等。无论如何，我相信它们会导致问题，最好的办法是完全放弃它们。