html - Making embedded PDF scrollable in iPad

Question

Welcome To Ask or Share your Answers For Others

html - Making embedded PDF scrollable in iPad

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have a PDF embedded in HTML using the object tag. The embedded PDF is a big document and when viewed from my desktop the PDF is displayed properly with scrollbar in all the browsers including safari. However when I view the same html page in iPad the embedded PDF does not have a scrollbar. Is there any way in which we can show the scrollbar in iPad for an embedded PDF document.

The code used for embeding the PDF is

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

I tried with iframe too and even that does not work.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

498 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:38:47+0000

This seems to work:

make the object tag big enough to show the whole PDF, and
contain it in a div with limited height and overflow:auto -- add -webkit-overflow-scrolling in iOS 5+ for good, native scrolling.

Here's the code I used:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF frame scrolling test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
      #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; }
      object { width: 500px; height: 10000px }
    </style>
  </head>
  <body>
    <div id="container">
      <object id="obj" data="my.pdf" >object can't be rendered</object>
    </div>
  </body>
</html>

Categories

html - Making embedded PDF scrollable in iPad

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags