1

div内にoverflow-x：scrollを使用して長い線グラフを表示するWebページがあります。これは、グラフを前後にスクロールできるWebページとしてうまく機能します。

ただし、ページを印刷すると、スクロール位置はゼロにリセットされます。これを克服する方法はありますか？

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 画面下にスクロールして「印刷」を押した場合、ブラウザーがドキュメントの一部のみを印刷するのは理にかなっていますか?当時の窓口？）ただし、実際に DOM を操作する JS を使用する場合 (つまり、CSS と同様に、人が右に 293 ピクセルスクロールした場合、x 位置オフセットを -293 に設定しますstyle="left: -293px; overflow: hidden;")、印刷されたドキュメントではそのまま表示されます。

私の提案は、グラフが非常に広い場合を除き、このナンセンスをすべてスキップして、グラフにプリンタースタイルシートを使用しwidth: 100%て、グラフ<div>がページ幅に縮小されるようにすることです。

于 2008-10-25T19:14:02.227 に答える
0

簡単なアプローチは、「印刷の設定」のようなリンクでユーザーが選択したスクロール位置をページにポストバックする JavaScript を用意することです。overflow:hidden次に、サーバー側は、グラフを適切にクリップするために、グラフがスクロール位置に相対的に配置されたページを返します。

もちろん、これは javascript が無効になっているユーザーには機能しません。これをサポートしたい場合は、テキスト入力要素や送信ボタンなどでスクロール位置を指定する必要があります。

于 2008-10-25T16:59:03.310 に答える
0

親のスクロール位置を一時的に子の負のマージンに変更し、その親を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>
于 2016-09-13T14:57:29.137 に答える