<object> PDF 无法在移动设备上滚动答案

【问题标题】：<object> PDF not scrollable on mobile<object> PDF 无法在移动设备上滚动
【发布时间】：2018-08-11 01:53:31
【问题描述】：

我在 html 中有一个 object 标记位置，如下所示：

<div class="viewport" id="pdf-viewport">
   <object class="pdf-object" data="PDF_URL_HERE" type="application/pdf"></object>
</div>

在我的桌面上查看体验还可以，但我无法在移动设备上滚动 pdf。如何添加此功能？我已经尝试过使用 CSS 和溢出，但我想我错过了一些东西。

编辑我尝试使用 GoogleDocs/GoogleDrive 在 iFrame 中嵌入 pdf，但它给我 Preview not available 的次数太多，所以它不可靠。

【问题讨论】：

能否请您提供一些关于您的设备、操作系统版本、您正在使用的浏览器等的信息？
我在我的 iPhone 上测试它，但这必须适用于所有移动（或几乎所有）设备，因为我们在现实世界使用应用程序中需要此功能
到目前为止，您尝试了哪些设备或模拟器？也许您遇到了极端情况。
我们正在 iphone 6/7/8、Safari 和 Chrome 上测试它，但它在那里不起作用。仅适用
这看起来是因为臭名昭著的 iphone css 溢出错误。请检查this 看看它会解决你的问题

标签： javascript html css pdf

【解决方案1】：

有时在移动设备上的渲染会使某些元素成为“可选择的”，并且在您触摸它时不会应用滚动。

您可以尝试通过使用 css 设置溢出来强制滚动，如果它不起作用，您可以尝试添加一个覆盖创建一个具有透明背景、全宽和全高的 div

<!-- HTML -->
<div class="overlay">
</div>

//CSS
.overlay{
  width: 100%;
  /* transparent background is set by default so no need to declare it supposedly */
}

然后，全高，将全高理解为全文档高度，可以使用：

// jQuery (you can even use javascript etc)
$(document).ready(function(){
   var height = $(document).height();
   $('.overlay').height(height);
   // or $('.overlay').css('height', height);
});

获得它。那么你必须能够正确滚动。上周我已经阅读了很多关于不在移动设备上滚动的问题，但我真的不知道有什么意义可以让它 100% 确定。

希望对你有帮助。

【讨论】：

【解决方案2】：

试试这个：

这就是我为使 iframe 滚动在 iPad 上工作所做的工作。请注意，此解决方案仅在您控制 iframe 中显示的 html 时才有效。

它实际上关闭了默认的iframe scrolling，而是使 iframe 内的 body 标签滚动。

Index.jsp

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

</style>
</head>
<body>

    <div id="container">
        <iframe src="test.jsp" id="iframe" scrolling="no"></iframe>
    </div>

</body>
</html>

test.jsp

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
}
body {
    height: 100%;
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 8px;
}
</style>
</head>
<body>
<!-- pdf present this location local storage.-->
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/richh.pdf" />
<script>
$("#iframe").contents().find("body").css({
    "height": "100%",
    "overflow": "auto", 
    "-webkit-overflow-scrolling": "touch"
});
</script>
</body>
</html>

另请访问链接：

https://wordpress.org/support/topic/pdf-not-showing-not-scrolling-on-mobile/

【讨论】：

【解决方案3】：

<iframe> 不是显示 PDF 的最佳方式（不要忘记与移动浏览器的兼容性，例如 Safari）。某些浏览器将始终在外部应用程序（或另一个浏览器窗口）中打开该文件。我发现的最佳和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器（甚至已经过时了）：

保留您的<iframe>，但不要在其中显示PDF，它将被包含<object> 标记的HTML 页面填充。为您的 PDF 创建一个 HTML 包装页，它应该如下所示：

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <embed src="your_url_to_pdf" type="application/pdf" />
    </object>
</body>
</html>

【讨论】：