无法使用 javascript 滚动 ul 列表

Question

我有一个相当简单的需要滚动 ul 列表。

我的最终目标是滚动到 class="active" 的 li。但是，我尝试了几种将 ul 定位为滚动的方法，但有些东西阻止了我滚动。

<div class="app-aside hidden-xs bg-white b-r">
  <div class="aside-wrap">
    <div class="navi-wrap">
      <nav class="navi clearfix">
        <ul id="module-nav" class="nav">   

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.media_is_link = true;" class="media_is_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;media-is&quot;})" ui-sref-opts="{ reload: true }" id="media_is_link" target="_top" href="/media-overview/media-is"><i></i><span>Media Is...</span></a>
          </li>

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.video_text_audio_link = true;" class="video_text_audio_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;video-text-audio&quot;})" ui-sref-opts="{ reload: true }" id="video_text_audio_link" target="_top" href="/media-overview/video-text-audio"><i></i><span>Video, Text, Audio</span></a>
          </li>

          <li id="icon-page" ui-sref-active="active" ng-click="app.click_history.is_this_media_link = true;" class="is_this_media_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;is-this-media&quot;})" ui-sref-opts="{ reload: true }" id="is_this_media_link" target="_top" href="/media-overview/is-this-media"><i class="glyphicon glyphicon-star"></i><span>Is This Media?</span></a>
          </li>

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.test_1_link = true;" class="test_1_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;test-1&quot;})" ui-sref-opts="{ reload: true }" id="test_1_link" target="_top" href="/media-overview/test-1"><i></i><span>Test 1</span></a>
          </li>

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.test_2_link = true;" class="test_2_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;test-2&quot;})" ui-sref-opts="{ reload: true }" id="test_2_link" target="_top" href="/media-overview/test-2"><i></i><span>Test 2</span></a>
          </li>

          <li id="icon-page" ui-sref-active="active" ng-click="app.click_history.linear_vs_dynamic_link = true;" class="linear_vs_dynamic_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;linear-vs-dynamic&quot;})" ui-sref-opts="{ reload: true }" id="linear_vs_dynamic_link" target="_top" href="/media-overview/linear-vs-dynamic"><i class="glyphicon glyphicon-star"></i><span>Linear vs Dynamic</span></a>
          </li>
          <li class="hidden-folded padder m-t m-b-sm text-muted section-header"><span>How Are Media and Ratings Related?</span>
          </li>

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.what_are_ratings_link = true;" class="what_are_ratings_link link-clicked" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;what-are-ratings&quot;})" ui-sref-opts="{ reload: true }" id="what_are_ratings_link" target="_top" href="/media-overview/what-are-ratings"><i></i><span>What Are Ratings?</span></a>
          </li>

          <li id="no-icon-page" ui-sref-active="active" ng-click="app.click_history.test_3_link = true;" class="test_3_link link-clicked active" role="button" tabindex="0"><a ui-sref="media-overview.dynamic-page({slug:&quot;test-3&quot;})" ui-sref-opts="{ reload: true }" id="test_3_link" target="_top" href="/media-overview/test-3"><i></i><span>Test 3</span></a>
          </li>
        </ul>
      </div>
      <div class="wrapper m-t"></div>
    </div>
  </div>

我试过了

jQuery

  $(document).ready(function() {
        $('#module-navi ul').animate({
          scrollTop: $("li#no-icon-page.test_3_link").offset().top
          }, "slow");
  });

原版JS

  var sidemenuitemintoview = function() {
    var a, b, i = 0;
    //- a = document.getElementById("leftmenuinnerinner");
    a = document.getElementById("module-nav")
    if (!a || !a.getElementsByClassName) {return false;}
    b = a.getElementsByClassName("active");
    if (b.length < 1) {return false;}  
    while (!isIntoView(a, b[0])) {
      i++
      if (i > 1000) {break;}
      a.scrollTop += 10;
    }
  }
  function isIntoView(x, y) {
    var a = x.scrollTop;
    var b = a + window.innerHeight;
    var ytop = y.offsetTop;
    var ybottom = ytop + 140;
    return ((ybottom <= b) && (ytop >= a));
  }

这是一个如此简单的愿望，为了这个 ul 的生命，我无法让它动起来！

scrollTop 不适用于 ul 或环绕它的 nav 标签。我有什么遗漏吗？

另外，在使用 JQuery 时，如果我将外部元素设置为 $("body, html")，那么整个页面都会移动，而不是侧边栏。

Answer 1

我能够让它工作。我必须创建一个 setTimeout，因为调用函数时元素尚未加载：

$(document).ready(function() {
  setTimeout(function(){ 
    console.log("scrolled --------------------------")
    sidemenuitemintoview()
  }, 100);
});

var sidemenuitemintoview = function() {
  var a, b, i = 0;
  a = document.getElementById("navi-wrap")
  console.log("sidemenuitemintoview()")
  if (!a || !a.getElementsByClassName) {return false;}
  b = a.getElementsByClassName("active");
  if (b.length < 1) {return false;}  
  while (!isIntoView(a, b[0])) {
    i++
    if (i > 1000) {break;}
    a.scrollTop += 10;
  }
}
function isIntoView(x, y) {
  var a = x.scrollTop;
  var b = a + window.innerHeight;
  var ytop = y.offsetTop;
  var ybottom = ytop + 140;
  return ((ybottom <= b) && (ytop >= a));
}

这很好用，我不必创建角度指令或使用插件。这通过获取可滚动列表的容器，然后移动到具有 class="active" 的元素来工作。这也适用于其他可滚动容器，而不仅仅是列表。

我还必须在原始问题中使用 class="navi-wrap" 向 div 添加一个 id="navi-wrap"。

Answer 2

您的 jQuery 选择器错误：

$(document).ready(function() {
        $('#module-nav').animate({
          scrollTop: $("#module-nav li.active").offset().top
          }, "slow");
  });