Question

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

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

问候

汤姆

<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）取下箭头。

只需将其添加到fancybox：

"arrows" : false

显示差异的JSFiddle。

2）设置箭头样式

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

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

2 个答案: