scrollen auf Überlauf, wenn die Kinder zählen mehr als eine Zahl ist

Question

Ich möchte hinzufügen, scroll auf <ul> Element, wenn die Nummer, wenn <li> s ist mehr als eine bestimmte Anzahl. Sagen wir, wir haben 12 Kinder. Ich möchte 7 von ihnen zeigen und den Rest scrollen.

Dies ist, was ich versuche:

$(document).ready(function(){ 
 
    $("ul.ul-scrollable, ol.ul-scrollable").each(function (key, val) { 
 
    max_num = $(this).attr('data-maxVisible') || 8; 
 
    //console.log(max_num); 
 
    var lis = $(this).children('li'); 
 
    if(lis.length > max_num) { 
 
     maxHeight = 0; 
 
\t \t \t for(i = 0; i < max_num; i++) { 
 
     \t maxHeight += +$(lis[i]).outerHeight(true); 
 
     \t //console.log(maxHeight); 
 
     } 
 
     $(this).css({'max-height' : maxHeight + 'px', 'overflow-y' : 'auto'}); 
 
    } 
 
    }); 
 
});

ul { 
 
    background: white; 
 
    width: 70px; 
 
} 
 
ul li { 
 
    padding: 3px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="ul-scrollable" data-maxVisible="7"> 
 
<li>li1</li> 
 
<li>li2</li> 
 
<li>li3</li> 
 
<li>li4</li> 
 
<li>li5</li> 
 
<li>li6 li6 li6</li> 
 
<li>li7</li> 
 
<li>li8</li> 
 
<li>li9</li> 
 
<li>li10</li> 
 
<li>li11</li> 
 
<li>li12</li> 
 
<li>li13</li> 
 
</ul>

Aber richtig die Berechnung für Höhe nicht anwendbar ist.

JS FIDDLE

Answer 1

Ein einfacher Weg, um den gleichen Effekt zu erreichen, ist der 7. Index des Abstand von der Oberseite zu greifen und dann die max-height auf diese Einstellung.

$(document).ready(function(){ 
 
    $("ul.ul-scrollable, ol.ul-scrollable").each(function (key, val) { 
 
    var distance = $(this).children('li').eq(7).offset().top; 
 
    $(this).css({'max-height' : distance + 'px', 'overflow-y' : 'auto'}); 
 
    }); 
 
});

ul { 
 
    background: white; 
 
    width: 70px; 
 
} 
 
ul li { 
 
    padding: 3px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="ul-scrollable" data-maxVisible="7"> 
 
<li>li1</li> 
 
<li>li2</li> 
 
<li>li3</li> 
 
<li>li4</li> 
 
<li>li5</li> 
 
<li>li6 li6 li6</li> 
 
<li>li7</li> 
 
<li>li8</li> 
 
<li>li9</li> 
 
<li>li10</li> 
 
<li>li11</li> 
 
<li>li12</li> 
 
<li>li13</li> 
 
</ul>