打印滾動的div

我有一個網頁，顯示一個長的線圖內的溢出x：滾動。這可以很好地作爲一個網頁，允許用戶在圖形中前後滾動。打印滾動的div

但是，當打印頁面時，滾動位置重置爲零。有沒有辦法解決這個問題？

2008-10-25 Andrew Davey

你不能在純CSS中做到這一點 - 你將不得不使用你的Javascript UI庫來重新實現滾動，以獲得你想要的。

打印時不使用滾動條的用戶狀態（考慮一下，如果滾動屏幕上的3個屏幕並點擊「打印」，瀏覽器是否可以打印該部分當時在你窗口中的文件？）。但是，如果您使用實際操縱DOM的JS（即，如果該人已滾動293像素，則將x位置偏移設置爲-293，就像CSS中的style="left: -293px; overflow: hidden;"一樣），則它將在打印文檔中顯示。

我的建議是，除非圖是非常寬，就跳過了這麼多廢話，並使用與width: 100%打印機樣式表圖表的<div>所以只是縮小到頁面寬度圖。

來源

2008-10-25 19:14:02 joelhardi

我認爲你將不得不指定印刷，你不知何故需要刪除溢出的備用CSS：

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

然而，也許是用JavaScript甚至Flash中的方法嗎？如果我理解正確，你只想打印一部分圖表（用戶選擇「？」而不是全部）？我很肯定這對純HTML/CSS是不可能的，但我堅信Flash或者JavaScript/AJAX（一次只加載一部分圖像）可以解決這個問題。

來源

2008-10-25 16:22:06

一個簡單的方法是將一些javascript文件發回給你的頁面，用戶在鏈接上選擇滾動位置，如「設置打印」。然後，服務器端返回一個頁面，其中相對定位在滾動位置的圖形使用overflow:hidden來適當地剪切圖形。

當然，這對JavaScript禁用的用戶不起作用 - 如果你想支持這個，你需要用戶指定滾動位置，如文本輸入元素和提交按鈕，你啓用時用javascript隱藏。

來源

2008-10-25 16:59:03 domgblackwell

您需要暫時將父級的滾動位置轉換爲子級的負邊距，並將該父級設置爲溢出：隱藏。

這裏是如何做到這一點的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-13 14:57:29 FlorianB

打印滾動的div

回答

相關問題