jquery - fancybox scroll 在 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访问时没有垂直滚动条。

有什么想法可以让它发挥作用吗？找到任何解决方案，例如应用:

#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 是滚动的引用，我们还需要告诉它有多大(因此 width 和 height 属性设置为 100%)

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

    #fancybox-inner{

    }

我已经在 IOS 上测试过，滚动时你的滚动条现在会出现:

可以在此处找到完整的 jsfiddle 示例(如上)http://jsfiddle.net/nxn46e3t/

让我知道这对您有何帮助。

祝你好运!