Making embedded PDF scrollable in iPad

Asked 23/11, 2011 at 5:27 Answered 16/9, 2015 at 9:5

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.

Azpurua answered 23/11, 2011 at 5:27 Comment(2)

Scrollbars are not prominent in iOS, they are merely an indicator of how far you have scrolled through a content piece, not to signify that scrolling is possible. – Bramante 23/11, 2011 at 6:18

@Albin : Did it worked in ipad with single finger scroll. With two finger scroll its working for me...Please find the link here #43186927 – Embosom 9/4, 2017 at 7:11

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>

Lethia answered 6/12, 2012 at 5:48 Comment(3)

I tried this approach. But in iPad I can see only first page image. I am not able to scroll – Foehn 11/1, 2016 at 10:10

@IfOnly: did u get any solution? Please share if u have fixed the issue. I am facing the same :( – Kozak 26/4, 2016 at 20:59

unfortunately no. Instead I provided a link to PDF and opened the PDF in separate view. – Foehn 19/5, 2016 at 10:41

I needed the same thing, so here I share.

Issues I faced:

Cropped content : iframe on iOS (iPad) content cropping issue
Scrollbars not shown : Making embedded PDF scrollable in iPad
Cannot make full width

Please try the following:

http://jsfiddle.net/aknMJ/2/embedded/result/

Used tricks:

Read the document width and scale the PDF frame according to that
"width:100%" does not work with iframes in iPad, so I needed to use CSS3 transformations
Wait until the PDF is completely loaded and then show&resize the PDF frame. Otherwise the content was cropped.

$('#pdfFrame').hide();
var pdfFrame = document.getElementById('pdfFrame');
pdfFrame.contentWindow.location.replace(PDF_URL);
$('#pdfFrame').on('load', function () {
    $('#pdfFrame').show();
    var documentWidth = $(document).width()
    var scale = (documentWidth / width) * 0.95;
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")");
});

Recommendatory answered 9/9, 2013 at 13:30 Comment(5)

i feel like i spent weeks with this issue and now i'm am so exhausted, but i find a solution for myself: $('#pdf_iframe').css("-webkit-transform", "scale(" + 1.63 + ")"); $('#pdf_iframe').css("zoom", "0.63"); The combination of these two properties after the pdf is loaded dynamically succeed to fit the pdf documents width into ipad properly. if someone wants explanations, feel free to notify me. – Belindabelisarius 6/6, 2014 at 17:8

about the scroll issue, sadly but the working solution is to make iframe's height fixed and this height has to be equal of the pdf's size. – Belindabelisarius 6/6, 2014 at 17:15

about my first comment - you have to experimenting with the values to make it fit. the values in the example work only for my case, i think. – Belindabelisarius 6/6, 2014 at 17:18

another approach is to use pdf.js but it's kind of tricky and it's hard to be implemented in a working project. – Belindabelisarius 6/6, 2014 at 17:19

Hi @VladimirTrifonov , Thanks for ur comment. I am facing similar issue like u mentioned. I want to embedd PDF in iOS-8.4, Android4.4+ cordova apps also in its web app version. I have tried using Iframe , pdf loaded correctly but Iam facing scroll issue. Do u have any comments on It? – Kozak 26/4, 2016 at 20:58

On the iPad you can use two fingers to scroll embedded content - this works for divs with overflow:scroll

Pinebrook answered 25/11, 2011 at 17:26 Comment(2)

But still the scrollbars are invisible. Is there any way we can make the scrollbars visible in ipad? – Azpurua 30/11, 2011 at 14:38

@Pinebrook Any idea for one finger scroll in ipad. With two its working. For reference here is my question #43186927 – Embosom 9/4, 2017 at 7:8

PDF.js is working perfectly in our case.

You can check the full 1-line solution here: Make embedded PDF scrollable in iPad

Good luck

Ynez answered 16/9, 2015 at 9:5 Comment(3)

PDF.js casues huge memory leaks on iOS, wouldn't recommend using it at all. – Peale 30/3, 2016 at 18:41

Do you have an alternative? That's the only working solution we have so far. – Ynez 31/3, 2016 at 7:48

In iOS the <object> tag uses far less memory, although it takes more time and effort to have it working correctly (scroll and resizing). – Peale 4/4, 2016 at 16:52

Recommended topics

Hot tags