Question

我有一个网页，在div内显示一个带有overflow-x：scroll的长线图。这适用于允许用户在图表中向后和向前滚动的网页。

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

Answer 1

我认为您将不得不指定一个替代CSS进行打印，您需要以某种方式删除溢出：

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

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

Answer 2

你无法在纯CSS中执行此操作 - 您必须使用您选择的Javascript UI库重新实现滚动，以获得您想要的内容。

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

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

Answer 3

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

当然这对于禁用javascript的用户不起作用 - 如果你想支持这个，你需要用户指定滚动位置，如文本输入元素和提交按钮，你在启用时用javascript隐藏。

Answer 4

您需要暂时将父级的滚动位置转换为子级的负边距，并将该父级设为overflow：hidden。

以下是如何在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>

打印滚动分区

4 个答案: