1

我有一个网页，它在一个带有溢出-x 的 div 内显示一个长线图：滚动。这作为一个网页效果很好，允许用户在图表中前后滚动。

但是，在打印页面时，滚动位置会重置为零。有没有办法克服这个问题？

4

4 回答 4

2

我认为您将不得不指定一个备用 CSS 来打印您需要以某种方式删除溢出的地方：

<link rel="stylesheet" type="text/css” href="sheet.css" media="print" />

但是，也许有一种使用 JavaScript 甚至 Flash 的方法？如果我理解正确，您只想打印图表的一部分（用户“选择”的那个？）而不是完整的？我很确定使用纯 HTML/CSS 是不可能的，但我坚信 Flash 或 JavaScript/AJAX（一次只加载图像的一部分）可以解决它。

于 2008-10-25T16:22:06.397 回答
1

你不能在纯 CSS 中做到这一点——你必须使用你选择的 Javascript UI 库重新实现滚动以获得你想要的。

打印时不使用滚动条的用户状态（想想看，如果您在页面上向下滚动 3 个屏幕并点击“打印”，浏览器是否只打印文档中的部分内容是否有意义？当时的窗口？）。但是，如果您使用 JS，它实际上操纵 DOM（即，如果该人向右滚动了 293 像素，则将 x 位置偏移设置为 -293，就像style="left: -293px; overflow: hidden;"在 CSS 中一样），那么它将在打印文档中显示为这样。

我的建议是，除非图表非常宽，否则只需跳过所有这些废话并使用打印机样式表与width: 100%图表一起使用，<div>以便图表缩小到页面宽度。

于 2008-10-25T19:14:02.227 回答
0

一个简单的方法是让一些 javascript 回发到您的页面，并在链接上显示用户选择的滚动位置，上面写着“设置打印”。然后服务器端返回一个页面，其中图形相对位于滚动位置，overflow:hidden以适当地剪切图形。

当然，这对于禁用 javascript 的用户不起作用 - 如果您想支持这一点，您需要用户在文本输入元素和提交按钮之类的东西中指定滚动位置，启用时您使用 javascript 隐藏这些按钮。

于 2008-10-25T16:59:03.310 回答
0

您需要暂时将父级的滚动位置变为子级的负边距，并将该父级设置为溢出：隐藏。

下面是如何在 Javascript 中做到这一点（这是唯一的方法，css 不能做到这一点）

请注意，您需要在打印后执行 printDone() 以恢复一切正常。您可以使用滚轮事件触发它，例如因为用户在尝试滚动时只会遇到问题。或者您可以像我一样放置一个按钮，并仅在调用 printGo() 时显示它。

<html>
<head>
<style>
#wrapper {
    width:800px;
    overflow-x:scroll;
}
#content {
    width:2000px;
    border:2px solid red;
}
@media print { /* This overwrites the css when printing */
    #wrapper {
        overflow-x:hidden;
    }
}
</style>
</head>
<body>
<a href="#" onclick="printGo()">Print</a><br>
<a href="#" onclick="printDone()">I'm done printing!</a>
<div id=wrapper>
    <div id=content>
        Hello this is my content.
    </div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');
var scrollPos;
function printGo(){
    scrollPos = wrapper.scrollLeft; // Save scroll position
    wrapper.scrollLeft = 0;
    wrapper.style.overflowX = 'hidden'; // Optional since css does it
    content.style.marginLeft = -scrollPos+'px'; // Put it as a negative margin of child instead
    window.print();
}
function printDone(){
    wrapper.scrollLeft = scrollPos; // Restore scroll position
    wrapper.style.overflowX = 'scroll'; // Optional since css does it
    content.style.marginLeft = '';
}
</script>
</body></html>
于 2016-09-13T14:57:29.137 回答