JavaScriptまたはJQueryでオリジナルコンテキストメニューを作りたい。

Question

実現したいこと

現在、JavaScriptまたはJQueryでオリジナルコンテキストメニューを作りたいと思っています。
それでいろいろ調べたのですが、どれもpageX・PageYを使う同じ方法でした。

CodePen

---

ただこれを試すと、ちょっと下にスクロールしてから右クリックすると、スクロールした分 下にコンテキストメニューが表示されます。

解決法はありませんか？JavaScriptだけで無理なのであればJQueryを使う方法でも良いです。

Comments

[yambejp]

現状が確認できるソースを提示するかcodepenなどに例示されるとよいでしょう

Answer 1

pageYを使用するとスクロールされた分も含んだ値になってしまうので、スクロールされた分を引けばいいと思います。

修正箇所

    document.getElementById('contextmenu').style.top=(e.pageY-12)+"px";

修正後

    document.getElementById('contextmenu').style.top=(e.pageY-window.scrollY-12)+"px";

Comments

[qwertyuiop]

ありがとうございます！
出来ました！