embed内のPDFをJSでスクロールさせる方法はあるか

Question

embedの中にPDFファイルを表示させています。（ブラウザはchromeを使っています）

PDFファイルをスクロールさせるときには、

• 表示領域を選択→マウスホイールする
• 右側のバーをつまんでスクロール

のどちらかになると思います。

このマウス移動をカットするため、別の領域での操作でPDFをスクロールさせたいと思っています（キーボード操作や、手近な別のボタンなど）。

そこで質問なのですが、
JSやライブラリを使ってembed内のコンテンツをスクロールさせることはできるでしょうか。
もし不可能な場合、なにかよい代替手法はあるでしょうか。

アドバイス、よろしくお願いいたします。

Answer 1

試してませんが、Scroll PDF using JavaScript - Stack Overflowで出来ませんか？結果を教えて下さい？

Comments

[退会済みユーザー]

ありがとうございます。まだ試せていませんがまたご報告します。

[退会済みユーザー]

大変遅くなりましたが、うまくいきましたので、ご報告いたします。ありがとうございました。

[oikashinoa]

おめでとうございます。まとめてもらった内容も分かりやすかったです
。

Answer 2

<div id="wrap" >
    <embed id="embed1"src="/pdf/100#&view=FitH"></embed>
</div>
<input type="button" id="btn1" value="push">

#wrap{
	width:600px;
    height:300px;
    overflow: auto;
}


#embed1{
    width: 600px;
    height: 3000px;
}

$("#btn1").on("click",function () {
    const tage = $("#wrap");
    const cur_scroll = tage.scrollTop();
    $("#wrap").animate({scrollTop:cur_scroll+250},300);
})

非常におそくなりましたが、PDFの表示を、遠隔でスクロールさせることができましたのでまとめを投稿します。
上記のコードで、buttonをクリックすると、250スクロールします（現在位置は動的に取得するようにしました）。

基本的にstackoverflowの通りですが、ポイントは以下の点です（iframeでなく、embedでも可能です）。

• embed iframe　などのPDF要素を、divでラッピングする
• PDF要素のheightを十分に大きくとっておく（全ページスクロールさせるなら全ページ分の高さ）
• div要素に対してscrollTop(jquery)操作をする。

embed や iframe は直接にはscrollTopがきかないようです。divでラッピングし、div側をスクロールさせることでうまくいきます。
heightを十分に大きくとるのがポイントになります。

ただし、難点としてページ指定ができないというのがあります。これは、heightが全ページカバーするような高さになっているためと思われます。