Javascript 在ul中的N个li之后添加一个滚动条

我需要在ul中显示不超过3个li元素，其中可以有

N

li元素。如果ul增加超过3个元素，我想放一个滚动条

我在谷歌搜索，没有一个简单的解决方案

这段代码可以很好地工作，但我想使它固定到元素的数量

#ul_notas_lesion{
    max-height: 500px;
    overflow-y: scroll;
}

我需要Javascript吗

这是我的代码：

 <div class="x_content">
                    <br />
                    <ul class="list-unstyled timeline">
                        <li>
                            <div class="block">
                                <div class="tags">
                                    <a href="" class="tag">
                                        <span>Entertainment</span>
                                    </a>
                                </div>
                                <div class="block_content">
                                    <h2 class="title">
                                        <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
                                    </h2>
                                    <div class="byline">
                                        <span>13 hours ago</span> by <a>Jane Smith</a>
                                    </div>
                                    <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <div class="tags">
                                    <a href="" class="tag">
                                        <span>Entertainment</span>
                                    </a>
                                </div>
                                <div class="block_content">
                                    <h2 class="title">
                                        <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
                                    </h2>
                                    <div class="byline">
                                        <span>13 hours ago</span> by <a>Jane Smith</a>
                                    </div>
                                    <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <div class="tags">
                                    <a href="" class="tag">
                                        <span>Entertainment</span>
                                    </a>
                                </div>
                                <div class="block_content">
                                    <h2 class="title">
                                        <a>Who Needs Sundance When You’ve Got&nbsp;Crowdfunding?</a>
                                    </h2>
                                    <div class="byline">
                                        <span>13 hours ago</span> by <a>Jane Smith</a>
                                    </div>
                                    <p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they’d pay to Fast-forward and… <a>Read&nbsp;More</a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="row justify-content-md-center">
                        <div class="col-12 col-lg-6">
                            <button type="button" class="btn btn-outline-primary mt-3 btn-gray btn-block btn-gray" data-toggle="modal" data-target="#modal_Photo_Upload">Agregar Nota</button>
                        </div>
                    </div>
                </div>

有了众筹，谁还需要圣丹斯？
13小时前简·史密斯
电影节过去是电影制作人的生死抉择时刻。在那里你遇到了制片人，他们可以为你的项目提供资金，如果买家喜欢你的电影，他们会付钱给快进，然后…阅读更多



阿格雷加诺塔酒店

我需要Javascript的东西吗

不，你没有。至少不适用于具有规则高度的

元件

#ul_notas_lesion{
    max-height: 500px;
    overflow-y: scroll;
}

规则高度

元素 对于具有规则高度的

元件，只需使用：




overflow-y:on



工作示例：


ul{
浮动：左；
右边距：12px；
填充：0；
最大高度：计算（38px*3）；
边框：1px实心rgb（255,0,0）；
右边框：2倍实心rgb（255,0,0）；
溢出x：隐藏；
溢出y：自动；
}
李{
宽度：90px；
高度：24px；
线高：24px；
保证金：0；
填充：6px；
边框：1px实心rgb（255,0,0）；
}

项目一


项目一
项目二


项目一
项目二
项目三


项目一
项目二
项目三
项目四


项目一
项目二
项目三
项目四
项目五
使用JS动态执行


var list=document.querySelector（“.list”）；
var li=document.queryselectoral（“.list li:n个子（-n+3）”）；
var高度=0；
li.forEach（（x）=>{
高度+=x.离视；
});
list.style.maxHeight=高度+px
div{
高度：80px；
}
.名单{
溢出y：自动；
}


布拉布拉


第二


第三


布拉布拉

我想我需要javascript/或者用
溢出-x
将
最大高度
放到
ul
但是我想用元素的数量而不是像素。当然，很好，但是你需要计算（38*3），在li中是24+6，我看不到其他8个像素…是高度（
24px
）加上顶部和底部的填充（
6px
+
6px
）以及每个
<38px=1px+6px+24px+6px+1px
的上下边框（
1px
）和上下边框（
1px
）是否假设li元素具有固定高度？我认为需要滚动li元素的数量（在3之后）而不是高度？好的，很好，这是一个很好的修复，我会尝试，但我不知道它是否有效，因为我不控制我的li的大小，因为我使用gentelella alella，我在组件中没有看到任何固定的高度配置。有任何方法可以用javascript捕获元素，并在第3个元素+1后添加滚动条是否出现？@Garsiv1932-我在上面为具有可变高度项的列表添加了第二个解决方案。我后来看到了由לבנימכה提出的解决方案，它们（几乎都是）使用相同的方法，只是我选择了CSS自定义属性，而不是原始
最大高度
属性。这是我正在搜索的修复程序。我只将overflow-x:auto；更改为overflow-y:scroll；因为我只希望滚动高度。非常感谢您的帮助。很高兴它有帮助：）