How to make a horizontal scrolling PDF document in HTML/JavaScript?

Question

I have a multi page PDF document. When I embed this in the browser it defaults to a vertical scroll. However I want to have a horizontal scroll to each page. Is there some way to do this either through configuration custom code or plugin?

Answer 1

As mentioned in an answer to a similar question, you can do that by using PDF.js

Their demo displays one page at a time from a source PDF, so it would be relatively straightforward to set up a horizontal scroll from there.

Answer 2

If you embed it into the browser with some sort of plugin, it's going to want to scroll vertically by default like you said...I suppose you could try to upload each page individually, then set some CSS styles to force it to scroll horizontally.

You could achieve that by setting the height to a specific number, then the width to 'auto'. Also try setting overflow-x: scroll;overflow-y: hidden; Again it will most likely be best if you add individual page images to a div, and then force a horizontal scroll rather than trying to hack a plugin.

Answer 3

You need to specify parameters in your pdf such as:

zoom=scale

This will set the zoom and scroll factors; it uses float or integer values. For example, a scale value of 100 will indicate a zoom value of 100%.

or:

view=Fit

This will set the view of the displayed page; it will use the keyword values defined in the pdf language specification.

EDIT

You could also use:

overflow-x: scroll; overflow-y: hidden;

This will force the scroll to be horizontal, but it doesn't always work with some types of HTML elements. Usually, I use it at the start when I first encounter a problem like this because it's ridiculously easy to do, but if that doesn't work, I use the first method I gave you and it works a whole lot more often then not.

Answer 4

you want only horizontal scroll means you can use overflow value css.

Example:
overflow-x:scroll
overflow-y:hidden

Answer 5

What you need is a way to embed a single page of a pdf document. Sadly, I cannot find this, but you could screenshot the document's pages individually, and put them in. If you can find a way to insert individual pages... Cool. Good job.

example: http://drive.google.com/file/d/0B_8mjJ-WV5kGNDNnRWgyTGVYR3M/view?usp=sharing unzip and open the .html document.

Answer 6

HTML

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

<div class="horizontal-scroll-wrapper  rectangles">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

CSS

::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;}

div{
  box-sizing:border-box;
}

body {
  background: #111;
}

.horizontal-scroll-wrapper{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:80px;
  max-height:500px;
  margin:0;
  background:#abc;
  overflow-y:auto;
  overflow-x:hidden;
  transform:rotate(-90deg) translateY(-80px);
  transform-origin:right top;
}
.horizontal-scroll-wrapper > div{
  display:block;
  padding:5px;
  background:#cab;
  transform:rotate(90deg);
  transform-origin: right top;
}

.squares{
  padding:60px 0 0 0;
}

.squares > div{
  width:60px;
  height:60px;
  margin:10px;
}

.rectangles{
  top:100px;
  padding:100px 0 0 0;
}
.rectangles > div{
  width:140px;
  height:60px;
  margin:50px 10px;
  padding:5px;
  background:#cab;
  transform:rotate(90deg) translateY(80px);
  transform-origin: right top;
}

That's not my code, taken from https://css-tricks.com/pure-css-horizontal-scrolling/ and works perfectly!