印刷時にJSを無効させる

現在サイト上でアニメーションスクロールAOSを使用しています。

これの影響で印刷時には画面で見えてる範囲以外は全て真っ白になってしまいます。
印刷画面上ではこの画面をまるまる無効にする事は可能なのでしょうか？

調査していましたらafterprintなどの条件分岐を発見しましたが
うまく稼働しませんでした。

一番やりたい事としましては
現在下記のように記述しています。

<link href="/js/aos/dist/aos.css" rel="stylesheet">
<script src="/js/aos/dist/aos.js"></script>
<script>AOS.init();</script>

上記を印刷時に記述そのものが消えてくれればいいのですが、、、

ちなみにaos.cssがソース上から消えないと
その他が消えても対象の部分が真っ白になってしまいます。

何かお知恵がありましたらご配慮いただけますと助かります。

行動規範の内容に同意します

回答2件

ベストアンサー

上記を印刷時に記述そのものが消えてくれればいいのですが、、、

aos.cssは、<link>タグにmedia="screen"と書き加えることで、印刷時には無効化できます。

投稿2019/08/05 02:48

maisumakun

総合スコア145183

extliger

2019/08/05 02:53

かなり初歩的ですいません、そりゃそうだと納得しました。的確にアドバイスして頂きありがとうございます。

行動規範の内容に同意します

解決済みですが、検索ワードを見て訪れた人の為に向けた回答をぶら下げます

印刷時にJSを無効させる

何をもって印刷時にJSを無効と言ってるのか定義が難しい所ではありますが、
おそらくJavaScriptにより変更した画面を取り消すという事が言いたいのだと思います。

しかし、それは不可能です。

JavaScriptは色々と小難しい計算やデータの加工が出来ますが、
最終的にはブラウザに提供したHTMLファイルを後付けで書き換える事で画面更新を促すものです。
そしてJavaScriptによるHTMLの変更は不可逆です。

一度変えてしまったHTMLは元には戻せません。

変数で保存しておいてelement.innerHTML = htmlString;みたいなコードでゴリ押しではめ込むとかすれば元には戻せます。
またonbeforeprintやonafterprintというイベントも存在しているので、
Ctrl+Pのショートカットで印刷したいようなケースでも
元々存在していたHTMLを一時的に復元して印刷が終了したら元に戻すという事は可能です。

しかし、かなりコストがかさみますし、設置したイベントは剥がれるしでバグの温床になりがちで非現実的と言わざるを得ないでしょう。
なので額面通りに捉えた印刷時にJSを無効にするを選ぶのは不可能と考えた方が良いでしょう。

従って、JavaScriptによるHTMLの変更を許容しながら、
印刷の邪魔にならないようにするという方向を模索することになります。

そちらの意味では解決方法が2通りあります。
ページの状況に従って使い分けたり併用してください。