I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the main issue: I want users to still be able to scroll through the pdf. I set up the scrolling functionality so that every time a user scrolls, the div tag mentioned above disappears, allowing users to scroll through the pdf. However, when they stop scrolling, the div tag reappears to prevent users from right-clicking on the pdf. This is what I have implemented so far:
var wheeling;
window.addEventListener('wheel', function (e) {
if (!wheeling) {
console.log('start wheeling!');
document.querySelector("#lesson_pdf").style.display = "none";
}
clearTimeout(wheeling);
wheeling = setTimeout(function() {
console.log('stop wheeling!');
document.querySelector("#lesson_pdf").style.display = "block";
wheeling = undefined;
}, 300);
});
Here is my HTML structure:
<div>
<div style="position: relative;">
//the embed tag I want to cover
<embed src=" {{ getImageFile($pdf_src) }}" class="tw-w-full tw-h-[500px] pdf-reader-frame" style="position: absolute;">
</div>
//The div tag mentioned earlier
<div style="position: absolute;
height: 100%;
width: 100%;
display: block;
z-index: 1;" id="lesson_pdf">
</div>
</div>
The problem is, the current setup is not functioning as intended. Sometimes I have to scroll multiple times before being able to scroll through the pdf file. Can anyone assist me in resolving this issue?