Question

I have an object tag place in the html like this:

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

The viewing experience is OK on my desktop, but I can't scroll the pdf on my mobile device. How can I add this functionality? I've tried with CSS and overflows but I guess I'm missing something.

EDIT I've tried embedding a pdf in an iFrame using GoogleDocs/ GoogleDrive, but it's giving me Preview not available too many times, so it is not reliable.

Could you please provide some infos to your device, OS version, Browser you are using etc.? — Michael W. Czechowski, Mar 05 '18 at 10:57
I was testing it on my iPhone, but this has to work on all mobile (or pretty much all) devices as we need this feature in real world use app — mdmb, Mar 05 '18 at 10:58
Which devices or emulators did you try so far? Maybe you've run into an edge case. — Michael W. Czechowski, Mar 05 '18 at 11:20
We are testing it on iphone 6/7/8, on Safari and Chrome and it does not work there. Only works — mdmb, Mar 05 '18 at 11:33
Does this help ? https://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari — Tarun Lalwani, Mar 05 '18 at 12:06
Have you tried embed like in [this example](https://stackoverflow.com/a/7044015/5859685)? — theoretisch, Mar 05 '18 at 13:14
Yes and the problem is with the Google itself. It throws `Preview not available` too many times - not a reliable solution. — mdmb, Mar 05 '18 at 13:18
And the error appears on every document? Maybe the name of the document needs to be without space (my doc.pdf -> myDoc.pdf) — theoretisch, Mar 05 '18 at 13:27
This looks like it's because of the notorious iphone css overflow bug. Please check [this](https://stackoverflow.com/questions/3845445/how-to-get-the-scroll-bar-with-css-overflow-on-ios) to see of it will solve your problems — Cemal, Mar 05 '18 at 16:54
Had to jump to a different project, but I will check this tomorrow. Thanks guys! — mdmb, Mar 06 '18 at 20:27

score 2 · Answer 1 · answered Mar 07 '18 at 07:26

try this:

This is what I did to get iframe scrolling to work on iPad. Note that this solution only works if you control the html that is displayed inside the iframe.

It actually turns off the default iframe scrolling, and instead causes the body tag inside the iframe to scroll.

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>

also visit link:

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

score 0 · Answer 2 · answered Mar 06 '18 at 20:25

<iframe> is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):

Keep your <iframe> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object> tag. Create an HTML wrapping page for your PDF, it should look like this:

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

score 0 · Answer 3 · answered Mar 09 '18 at 22:09

Sometimes the rendering on mobile makes some elements being "selectables" and does not apply scrol when you touch it.

You can try force scroll by setting overflow to it with css, if it does not work, you can try adding an overlay creating a div with transparent background, full width and height

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

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

Then, the full height, Understanding full height as full document height, you can use:

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

to obtain it. then you must be able to scroll properly. I've read many questions about not scrolling on mobile last weeks, and i don't really know what's the point that makes it 100% sure yet.

Hope it helps you.

3 Answers3