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> 

私は、これは単純な欲望と、このUL Iの生活のためである

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)); 
    } 

を試してみましたそれを動かすことはできません！

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"を追加する必要もありました。 jQueryのための

Answer 2

あなたのセレクタが間違っている：

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