打印滚动的div

问题描述：

我有一个网页，显示一个长的线图内的溢出x：滚动。这可以很好地作为一个网页，允许用户在图形中前后滚动。打印滚动的div

但是，当打印页面时，滚动位置重置为零。有没有办法解决这个问题？

答

你不能在纯CSS中做到这一点 - 你将不得不使用你的Javascript UI库来重新实现滚动，以获得你想要的。

打印时不使用滚动条的用户状态（考虑一下，如果滚动屏幕上的3个屏幕并点击“打印”，浏览器是否可以打印该部分当时在你窗口中的文件？）。但是，如果您使用实际操纵DOM的JS（即，如果该人已滚动293像素，则将x位置偏移设置为-293，就像CSS中的style="left: -293px; overflow: hidden;"一样），则它将在打印文档中显示。

我的建议是，除非图是非常宽，就跳过了这么多废话，并使用与width: 100%打印机样式表图表的<div>所以只是缩小到页面宽度图。

答

我认为你将不得不指定印刷，你不知何故需要删除溢出的备用CSS：

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

然而，也许是用JavaScript甚至Flash中的方法吗？如果我理解正确，你只想打印一部分图表（用户选择“？”而不是全部）？我很肯定这对纯HTML/CSS是不可能的，但我坚信Flash或者JavaScript/AJAX（一次只加载一部分图像）可以解决这个问题。

答

一个简单的方法是将一些javascript文件发回给你的页面，用户在链接上选择滚动位置，如“设置打印”。然后，服务器端返回一个页面，其中相对定位在滚动位置的图形使用overflow:hidden来适当地剪切图形。

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

答

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

这里是如何做到这一点的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>

相关推荐