Scroll PDF using JavaScript

问题:

I found a similar question Scroll PDF embedded in HTML but didn't see an answer. Does anyone have any suggestions for how to manipulate a PDF displayed within an iframe? Similar to the previous post link, I'm trying to scroll the PDF when the iframe doesn't have the focus (the host page does).

Thanks!

回答1:

Actually there is an answer in the link You provided:

Hardly.

What you might be able to do is to put the iframe into a div with overflow: auto, and give the iframe a very large height value so the containing PDF is at full size. Make the surrounding div less tall than the iframe. When your buttons get clicked, scroll the surrounding div.

I haven't tested it so there may be some snag on the way, but this could work - and is probably the best you can do.

~Pekka 웃

It's pretty easy. That's how you do it:

It depends on whether the iframe is "out-source", not from your server. Let's just say that it is out-source

CODE

<div id="iframeContainer" style="width: 800px; height: 600px; overflow: auto;">
   <iframe width="1800" height="6000" src="yourPDFfileSRC" scrolling="no">
   </iframe>
//You have to know exact width and height of PDF file
</div>

 

<script type="text/javascript">
$("document").ready(function()
{
  $("#iframeContainer").scrollTop(1400);
});
</script>

BONUS

You could animate it like that:

<script type="text/javascript">
    $("document").ready(function()
    {
      $("#iframeContainer").animate({scrollTop: 1400}, 500); //500 - time of animation
    });
</script>