fancybox滚动不会显示在iPad上，而是显示在浏览器中

Question

我有a page where the scrollbar in the fancybox is not displayed from iPad but is displayed from Google Chrome from Desktop网址为http://jsfiddle.net/wqm0x21n/1/您可以滚动fancybox内容，但从iPad访问时没有垂直滚动条。

任何想法如何使它工作？ 任何解决方案如SO所示，如申请：

#fancybox-inner{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

没有帮助。

如果需要，这里是jsfiddle代码：

JS：

$(".fancyTrigger").fancybox({
    fitToView: false,
    autoSize: false,
    afterLoad: function () {
        this.width = 200;
        this.height = 200;
    }
});
$(".fancyTrigger").trigger('click');

CSS：

#TheFancybox {
    display: none;
}

#fancybox-inner{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

Answer 1

嗯，我已经仔细查看了您的代码，并为您做了以下调整：

1. 虽然你在css中引用过，但是你错过了html中的#fancybox-inner div容器元素。请参阅此更新的jsfiddle：http://jsfiddle.net/nxn46e3t/

2. 修改了你的CSS，所以父DIV是滚动的参考，我们还需要告诉它有多大（因此宽度和高度属性设置为100％）

  body {
       background-color: #eef;     
    }
    #TheFancybox {
     overflow:auto;
     -webkit-overflow-scrolling:touch;
     width: 100%;
     height: 100%;  
    }

    #fancybox-inner{

    }

我在IOS上测试过，滚动时现在会出现滚动条：

完整的工作jsfiddle示例可以在这里找到（如上所述）http://jsfiddle.net/nxn46e3t/

让我知道这对你有用。

祝你好运！