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.

k.swapnil · Accepted Answer

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/

<object> PDF not scrollable on mobile

Tags:

javascript

html

css

pdf

mdmb

Video Answer

1 Answers

k.swapnil

Recent Activity

Donate For Us