Mark.js 在可滚动的内部时不滚动到下一个结果 div/table

Question

我正在使用带有 jquery 和 mark.js 的 minicss 框架来构建响应式、one-page、可搜索的用户手册。

我正在尝试使用带有搜索栏突出显示的 mark.js 脚本在一页上循环浏览结果。

一切正常，直到找到一个位于可滚动 table div 中的结果。

类似于这个例子： https://jsfiddle.net/julmot/973gdh8g/

这是我在 header 中用于 mark.js 的代码：

window.onload=function(){

$(function() {

  // the input field
  var $input = $("input[type='search']"),
    // clear button
    $clearBtn = $("button[data-search='clear']"),
    // prev button
    $prevBtn = $("button[data-search='prev']"),
    // next button
    $nextBtn = $("button[data-search='next']"),
    // the context where to search
    $content = $(".content2"),
    // jQuery object to save <mark> elements
    $results,
    // the class that will be appended to the current
    // focused element
    currentClass = "current",

    // top offset for the jump (the search bar)
    offsetTop = 70,
    // the current index of the focused element
    currentIndex = 0;

  /**
   * Jumps to the element matching the currentIndex
   */
  function jumpTo() {
    if ($results.length) {
      var position,
        $current = $results.eq(currentIndex);
      $results.removeClass(currentClass);

      if ($current.length) {
        $current.addClass(currentClass);


          position = $current.offset().top - offsetTop;
        //window.scrollTo(0, position);

      //var currentmark = getElementsByClassName('current');

          //var tab = getElementsByClassName('scrollable striped');
         var doc = document.getElementById('doc-content');

         var element = document.getElementsByClassName('current');



          //var menu = getElementById('nav-drawer');

            //menu.scrollTo(0, position);
          //tab.scrollTo(0, position);
            //tab.scrollTo(0, position);

    element.scrollTo(0, position);

          doc.scrollTo(0, position);


        //element.scrollIntoView(true);  

         //window.scrollTo(0, position);



      }
    }
  }

  /**
   * Searches for the entered keyword in the
   * specified context on input
   */
  $input.on("input", function() {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,

          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

  /**
   * Clears the search
   */
  $clearBtn.on("click", function() {
    $content.unmark();
    $input.val("").focus();
  });

  /**
   * Next and previous search jump to
   */
  $nextBtn.add($prevBtn).on("click", function() {
    if ($results.length) {
      currentIndex += $(this).is($prevBtn) ? -1 : 1;
      if (currentIndex < 0) {
        currentIndex = $results.length - 1;
      }
      if (currentIndex > $results.length - 1) {
        currentIndex = 0;
      }
      jumpTo();
    }
  });
});


    }

我试过添加

var element = document.getElementsByClassName('current');

element.scrollTo(0, position);

在 jumpto() 脚本中，就在它滚动主 window 之前，但是由于某些原因它似乎不起作用。

Answer 1

已编辑，您需要滚动 table 使用 .closest() 和 demo

找到它的父级

function jumpTo() {
  if ($results.length) {
    var position,
      $current = $results.eq(currentIndex);
    $results.removeClass(currentClass);
    if ($current.length) {
      $current.addClass(currentClass);
      var parent = $current.closest('table')
      if (parent.length) {
        $('html').scrollTop(parent.offset().top - offsetTop)
        parent.scrollTop(parent.scrollTop() - parent.offset().top + $current.offset().top);
      }
      else {
        $('html').animate({
          scrollTop: $current.offset().top - offsetTop
        }, 300);
      }
    }
  }
}

Mark.js 在可滚动的内部时不滚动到下一个结果 div/table

Mark.js not scrolling to next result when inside a scrollable div/table

search

jquery

highlight