You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 20:39:03