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?
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?
Share Improve this question asked Oct 11, 2016 at 14:51 RolandoRolando 62.7k103 gold badges278 silver badges422 bronze badges 08 Answers
Reset to default 1If 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.
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.
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})
});
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 problems
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.
you want only horizontal scroll means you can use overflow value css.
Example:
overflow-x:scroll
overflow-y:hidden
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./file/d/0B_8mjJ-WV5kGNDNnRWgyTGVYR3M/view?usp=sharing unzip and open the .html document.
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./pure-css-horizontal-scrolling/ and works perfectly!