<嵌入>PDF 在移动设备上不可滚动

发布于 2025-01-16 04:29:23 字数 1106 浏览 2 评论 0原文

我引入了一个我的网页上有一个 PDF 元素，对于我正在使用的网络软件来说，这是一种奇怪的解决方法，但它在 PC 上运行良好。但当我在移动设备上使用时，它根本不会滚动，几乎看起来 PDF 的首页只是网页上的固定图像。

操作系统是IOS。

（注意：我使用嵌入和对象的原因是因为我希望 PDF 显示在网页上，而用户不必单击链接并重定向。）

下面是我使用的代码。

!DOCTYPE html
<html>
  <header>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </header>
<head>
<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>
 <object data="https://assets.site-static.com/userFiles/3377/file/Seller_Guide_Final_Use_3822.pdf" type="pdf">
    <embed src="https://assets.site-static.com/userFiles/3377/file/Seller_Guide_Final_Use_3822.pdf" width="350" height="500" />
 </object>

<script>
$("#iframe").contents().find("body").css({
   "height": "100%",
   "overflow": "auto", 
   "-webkit-overflow-scrolling": "touch"
});
</script>
</body>
</html>

原文

I've introduced an <embed> element on my web page for a PDF, it was kind of a weird work around with the web software I'm using but it works fine on a PC. But when I go on mobile it won't scroll at all, it almost looks like the front page of the PDF is just a stationary image on the webpage.

The OS is IOS.

(note: the reason I'm using embed and object is because I want the PDF to display on the webpage without a user having to click a link and be redirected.)

Below is the code I used.

!DOCTYPE html
<html>
  <header>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </header>
<head>
<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>
 <object data="https://assets.site-static.com/userFiles/3377/file/Seller_Guide_Final_Use_3822.pdf" type="pdf">
    <embed src="https://assets.site-static.com/userFiles/3377/file/Seller_Guide_Final_Use_3822.pdf" width="350" height="500" />
 </object>

<script>
$("#iframe").contents().find("body").css({
   "height": "100%",
   "overflow": "auto", 
   "-webkit-overflow-scrolling": "touch"
});
</script>
</body>
</html>

分享到QQ

分享到微博