微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么 rangy 没有滚动到范围内结果的位置?

如何解决为什么 rangy 没有滚动到范围内结果的位置?

我使用 rangy 在用户搜索后突出显示特定 div 中的某些文本。正在搜索的文本包含在一个 div 中,我将范围限制为。这个可搜索文本也是很多段落,需要用户向下滚动到可搜索文本的末尾。

我能够搜索并突出显示范围内的文本,但是当找到匹配项时,搜索结果不会滚动到用户页面视图中。搜索结果突出显示,但它位于用户当前视图的下方,他们需要向下滚动才能看到它。

匹配成功后,我希望搜索结果滚动到用户的视图中。我怎样才能做到这一点?

这是我用来搜索和突出显示方法,它是从与我页面上的 document.getElementById("my-div") 不同的 div 调用的:

doSearch(text) {
  var range = rangy.createrange();
  var searchScopeRange = rangy.createrange();
  searchScopeRange.selectNodeContents(
    document.getElementById("my-div")
  );

  var options = {
    caseSensitive: false,wholeWordsOnly: true,withinRange: searchScopeRange
  };

  range.selectNodeContents(document.getElementById("my-div"));
  this.searchResultApplier.undoToRange(range);

  var searchTerm = text;

  if (searchTerm !== "") {
    // Iterate over matches
    while (range.findText(searchTerm)) {
      // range Now encompasses the first text match
      this.searchResultApplier.applyToRange(range);

      // Collapse the range to the position immediately after the match
      range.collapse(false);
      break;
    }
  }
},

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。