如何在WebView2中通过编程方式滚动PDF文件？

DevOps 小满

2026-7-23

WebView2加载PDF后无法用window.scrollTo滚动的问题解决

问题原因

WebView2加载PDF时，会调用内置的PDF阅读器组件，此时页面的DOM结构并非普通网页，window.scrollTo()操作的是外层窗口，而PDF内容的滚动容器是阅读器内部的独立元素，因此直接操作window无法生效。

解决方案

方法1：使用官方PdfViewer API（推荐）

WebView2提供了专门的CoreWebView2.PdfViewer对象，直接通过API操作PDF滚动或跳转，稳定性更高，无需依赖DOM结构：

// 确保WebView2已初始化完成且PDF已加载
if (browser.CoreWebView2 != null && browser.CoreWebView2.PdfViewer.IsDocumentLoaded)
{
    // 跳转到指定页码（页码从1开始）
    await browser.CoreWebView2.PdfViewer.NavigateToPageAsync(3);

    // 或者滚动到指定百分比位置（0.0是顶部，1.0是底部）
    await browser.CoreWebView2.PdfViewer.NavigateToPositionAsync(0.5);
}

方法2：通过DOM操作像素级滚动

如果需要精确的像素级滚动，需定位到PDF阅读器内部的滚动容器元素，再修改其scrollTop属性。注意：DOM结构可能随WebView2版本变化，需测试确认选择器：

// 向下滚动300px
await browser.ExecuteScriptAsync(@"
    // 找到PDF滚动容器（不同版本可能需要调整选择器）
    const scrollContainer = document.querySelector('#viewerContainer .scrollContainer');
    if (scrollContainer) {
        // 累加滚动距离
        scrollContainer.scrollTop += 300;
        // 或者直接设置到指定位置
        // scrollContainer.scrollTop = 300;
    }
");