I have a java ee application where I'm using JSF with Primefaces.

Now I need to open a dialog where PDF document is displayed.It is disabled to print or download the document. So I have hidden the bar.

<p:dialog widgetVar="dlgpdf" height="800" width="950" header="pdf" maximizable="false" minimizable="false" resizable="false" dynamic="true" showEffect="clip">
     <p:media value="#{DIPCSS.downloadFiles()}" player="pdf" width="900px" height="600px" id="pdfvisualizer">
         <f:param name="idee" value="#{DIViewBean.id}" />
         <f:param name="#toolbar" value="0" />
    </p:media>
</p:dialog>

Everything is fine here.

But how do I know that the user has scrolled to the end of the document? Then I want to enable the button press.

I've tried a lot of JS code, but none of it works for me. The problem is probably that it's in a dialog and there is a new html structure. Any recommendations?

I try this now:

<script type="text/javascript">
     const myDiv = document.getElementById('pdfvisualizer')
     myDiv.addEventListener('scroll', () => {
           if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) { console.log('scrolled to bottom')}
              })
</script>

And Error is: Uncaught TypeError: Cannot read property 'addEventListener' of null