如何在HTML页面实现PDF文档的Marquee自动滚动（大屏无人值守）

I’ve tackled similar kiosk PDF display challenges before, and while converting to JPG works, it loses the crispness and scalability of native PDFs. Here are two reliable approaches to use PDFs directly with that marquee-style slow scroll, while fully locking out user interactions:

Method 1: Use PDF.js for Full Control (Recommended) #

Mozilla’s PDF.js is the industry standard for rendering PDFs in the browser, giving you complete control over display and behavior. Perfect for unattended kiosks:

Step 1: Add the PDF.js Library #

Host the library locally (best for offline kiosks) or use a CDN:

<script src="path/to/pdf.js"></script>
<script src="path/to/pdf.worker.js"></script>

Step 2: Create a Scrollable Container #

Set up a full-screen container to hold all PDF pages, with overflow hidden to prevent manual scrolling:

<div id="pdf-container" style="width: 100vw; height: 100vh; overflow: hidden; position: relative;"></div>

Step 3: Implement Auto-Scroll & Rendering #

This code renders all PDF pages, then slowly scrolls the container top-to-bottom, looping when it reaches the end. It also disables all user interaction with the content:

const container = document.getElementById('pdf-container');
const pdfUrl = 'your-document.pdf';

// Initialize PDF.js
pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  const renderPages = async () => {
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum);
      const viewport = page.getViewport({ scale: 1.5 }); // Adjust scale to fit your screen
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvas.style.pointerEvents = 'none'; // Block user clicks on pages
      container.appendChild(canvas);
      
      await page.render({ canvasContext: context, viewport }).promise;
    }
    
    // Start slow auto-scroll
    let scrollPosition = 0;
    const scrollSpeed = 0.8; // Lower = slower scroll
    
    setInterval(() => {
      scrollPosition += scrollSpeed;
      // Loop back to top when end is reached
      if (scrollPosition >= container.scrollHeight - container.clientHeight) {
        scrollPosition = 0;
      }
      container.scrollTop = scrollPosition;
    }, 30); // Update interval (ms)
  };
  
  renderPages();
});

Step 4: Lock Down the Entire Page #

Add these CSS rules to prevent any user interaction with the page itself:

body {
  margin: 0;
  overflow: hidden;
  pointer-events: none; // Disable all clicks/taps on the page
}
#pdf-container {
  pointer-events: none;
}

Method 2: Simplified Iframe Approach (Quick Fix) #

If you don’t need full rendering control, embed the PDF in an iframe and control scrolling with JavaScript. Note this depends on the browser’s built-in PDF viewer:

<iframe id="pdf-iframe" src="your-document.pdf" style="width: 100vw; height: 100vh; border: none; pointer-events: none;"></iframe>
<script>
  const iframe = document.getElementById('pdf-iframe');
  let scrollPos = 0;
  const speed = 0.8;
  
  setInterval(() => {
    scrollPos += speed;
    // Works only if PDF is hosted on the same domain (CORS restriction)
    iframe.contentWindow.scrollTo(0, scrollPos);
    if (scrollPos >= iframe.contentDocument.body.scrollHeight - iframe.clientHeight) {
      scrollPos = 0;
    }
  }, 30);
</script>

Important: This method has limitations—some browsers may override the pointer-events setting for their native PDF viewer, and it requires same-domain hosting. For a reliable kiosk setup, Method 1 is the better choice.

Both approaches eliminate the need for PDF-to-image conversion, keeping text crisp and ensuring smooth, unattended scrolling.

内容的提问来源于stack exchange，提问作者J.B.Willers