Javascript <；对象>；PDF不能在手机上滚动_Javascript_Html_Css_Pdf

Javascript <；对象>；PDF不能在手机上滚动

javascript html css pdf

Javascript <；对象>；PDF不能在手机上滚动,javascript,html,css,pdf,Javascript,Html,Css,Pdf,我在html中有一个对象标记，如下所示： <div class="viewport" id="pdf-viewport"> <object class="pdf-object" data="PDF_URL_HERE" type="application/pdf"></object> </div> <html> <body> <object data="your_url_to_pdf" type="app

我在html中有一个

对象

标记，如下所示：

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

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

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

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

不是显示pdf的最佳方式（不要忘记与移动浏览器的兼容性，例如Safari）。某些浏览器总是在外部应用程序（或其他浏览器窗口）中打开该文件。我发现的最好和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器（甚至非常过时）：

保留您的

，但不要在其中显示PDF，它将被包含

标记的HTML页面填充。为您的PDF创建HTML包装页，它应该如下所示：

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

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

试试这个：

这就是我让iframe滚动在

iPad

上工作所做的。请注意，此解决方案仅在控制iframe中显示的html时有效

它实际上关闭了默认的

iframe滚动

，而是导致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>

<!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>


#容器{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：100%；
身高：100%；
溢出：隐藏；
}

test.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>

<!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>


html{
溢出：自动；
-webkit溢出滚动：触摸；
}
身体{
身高：100%；
溢出：自动；
-webkit溢出滚动：触摸；
保证金：0；
填充：8px；
}
$（“#iframe”）.contents（）.find（“body”）.css({
“高度”：“100%”，
“溢出”：“自动”，
-webkit溢出滚动“：“触摸”
});

另请访问以下链接：

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

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

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

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

为了得到它。然后您必须能够正确滚动。上周我读了很多关于不在手机上滚动的问题，我真的不知道是什么让它100%确定

希望它能对您有所帮助。

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