滚动溢出如果孩子数比数

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>