滾動溢出如果孩子數比數

Question

更多我想補充長卷<ul>元素，如果數字如果<li> s是不是一個特定的數量。 假設我們有12個孩子。我想展示其中的7個，並滾動剩下的部分。

這是我嘗試：

$(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>

但是，對於身高的計算是不適用正確。

JS FIDDLE

Answer 1

實現同樣效果的一個更簡單的方法是從頂部搶7日指數的距離，然後設置max-height了這一點。

$(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>