ngx-extended-pdf-viewer 使用搜索API时如何禁用自动滚动到搜索文本?
ngx-extended-pdf-viewer 调用搜索API禁用自动滚动方案
ngx-extended-pdf-viewer 内置的搜索API默认会自动滚动到首个匹配结果位置,官方未提供直接关闭该行为的配置项,可通过以下两种方案实现需求:
方案1:临时劫持滚动方法(适配现有搜索逻辑,改造成本低)
调用搜索接口前后临时屏蔽容器的滚动能力,执行完成后恢复即可,不影响其他正常交互:
// 1. 获取PDF渲染容器 const pdfContainer = document.querySelector('.pdfViewer') as HTMLElement; // 2. 保存原始滚动方法 const originScrollTo = pdfContainer.scrollTo; const originScrollIntoView = Element.prototype.scrollIntoView; // 3. 劫持滚动方法,屏蔽搜索触发的滚动 pdfContainer.scrollTo = () => {}; Element.prototype.scrollIntoView = () => {}; // 4. 执行你的搜索高亮逻辑 this.pdfViewerFindService.find('目标高亮文本', { highlightAll: true, matchCase: false, wholeWord: false }); // 5. 异步恢复原始滚动方法,避免影响后续操作 setTimeout(() => { pdfContainer.scrollTo = originScrollTo; Element.prototype.scrollIntoView = originScrollIntoView; }, 0);
方案2:直接调用底层高亮API(无滚动风险,更稳定)
如果你的需求仅为指定位置文本高亮,不需要搜索的匹配、计数等能力,可以跳过搜索API直接使用库的高亮渲染接口:
- 提前存好标注钉对应文本的页码、坐标范围信息
- 调用
PdfAnnotationService.addTextHighlight()方法直接在对应位置渲染高亮层,该操作完全不会触发页面滚动 - 悬浮结束后调用对应清除接口移除高亮即可
内容的提问来源于stack exchange,提问作者Shess
相关产品推荐
相关产品推荐

