CODEWITHSUNDEEP
javascripthtmlpdf
Rolando
Rolando

Reputation: 62596

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

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?

Upvotes: 10

Views: 15501

Answers (8)

K J
K J

Reputation: 11733

This request for horizontal PDF scrolling, was possible at the time of the question. By using SOME browsers of that era, such as Netscape/Mozilla/Explorer, with SOME plugins of that time, notably Tracker PDFView or Foxit Reader equivalents.

However, those Netscape and ActiveX technologies were removed from 95% of browsers and thus those older versatile plugins abandoned.

The current model for PDF plugin viewers is, a cohesive ONLY internationally vertical (avoiding the HOW do I scroll pages starting on the right for Easterners and on the left for Westerners).

If you attempt to use a modern PDF viewer in a horizontal fashion you will have problemsenter image description here enter image description here

Upvotes: 0

developerCK
developerCK

Reputation: 4506

In case if some one is still strugglig as i was,

const loadingTask = pdfjsLib.getDocument({
  url:'<document url>'
});



 loadingTask.promise.then(function(pdf) {

PDFViewerApplication.setInitialView('',{'sidebarView':0,'scrollMode':1,'rotationn':0,'spreadMode':-1})
 });

Upvotes: 0

Daniel Danielecki
Daniel Danielecki

Reputation: 10502

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!

Upvotes: -1

BryanH
BryanH

Reputation: 6062

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.

Upvotes: 1

SIGSTACKFAULT
SIGSTACKFAULT

Reputation: 1035

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.

Upvotes: -1

Ayyappan K
Ayyappan K

Reputation: 1186

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

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

Upvotes: -1

NathanielSantley
NathanielSantley

Reputation: 297

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.

Upvotes: -1

Benediah
Benediah

Reputation: 147

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.

Upvotes: 1

Related Questions