修改

Question

我有一个多页PDF文档。当我在浏览器中嵌入它时，它默认为垂直滚动。但是我希望每页都有一个水平滚动。有没有办法通过配置自定义代码或插件来做到这一点？

Answer 1

正如an answer to a similar question中所述，您可以使用PDF.js

来实现

Their demo一次从源PDF显示一页，因此从那里设置水平滚动会相对简单。

Answer 2

如果您使用某种插件将其嵌入浏览器中，它会像您所说的那样默认垂直滚动...我想您可以尝试单独上传每个页面，然后设置一些CSS样式强制它水平滚动。

您可以通过将高度设置为特定数字，然后将宽度设置为＆＃39; auto＆＃39;来实现。另外尝试设置overflow-x：scroll; overflow-y：hidden;再次，如果您将单个页面图像添加到div，然后强制水平滚动而不是尝试破解插件，则最有可能是最好的。

Answer 3

您需要在pdf中指定参数，例如：

zoom=scale

这将设置缩放和滚动因子;它使用浮点值或整数值。例如，比例值100表示缩放值为100％。

或：

view=Fit

这将设置显示页面的视图;它将使用pdf语言规范中定义的关键字值。

修改

你也可以使用：

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

此将强制滚动为水平，但它并不总是适用于某些类型的HTML元素。通常情况下，我在第一次遇到这样的问题时就开始使用它，因为它很容易做到，但是如果它不起作用，我会使用我给你的第一种方法，它可以整体运行更经常然后没有。

Answer 4

你只想要水平滚动意味着你可以使用溢出值css。

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

Answer 5

zoom = scale

使用float或integer值设置缩放和滚动因子。例如，比例值100表示缩放值为100％。或者

视图=拟合

Answer 6

您需要的是嵌入pdf文档的单页的方法。可悲的是，我找不到这个，但是你可以单独截取文档的页面并将它们放入。如果你能找到一种插入单个页面的方法......很酷。干得好。

示例：http://drive.google.com/file/d/0B_8mjJ-WV5kGNDNnRWgyTGVYR3M/view?usp=sharing解压缩并打开.html文档。

Answer 7

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;
}

那不是我的代码，摘自https://css-tricks.com/pure-css-horizontal-scrolling/，效果很好！

如何用HTML / JavaScript制作水平滚动PDF文档？

7 个答案:

修改