Javascript 用箭头向上和向下滑动div

我有一个可能包含多个子div的div

当内部div超过5时，我想垂直滑动它们

HTML:

<div class="category">
            <div class="col-12 category_sibe" data-tooltip="SIBES" id="idSibe">
                
            </div>
            <div class="col-12 category_parc" data-tooltip="Parcs nationaux" id="idParc">
                
            </div>
            <div class="col-12 category_daya" data-tooltip="Dayas" id="idDaya">
                
            </div>
            <div class="col-12 category_faune" data-tooltip="Faune" id="idFaune">
              
            </div>
           <div class="col-12 category_daya" data-tooltip="Dayas" id="idDaya">
            
           </div>
            <div class="col-12 category_biotope" data-tooltip="Biotope" id="idBtp">
                
            </div>
           
        </div> 

下面是我的codepen演示，以更好地了解它的外观：

---

有没有办法取得这样的结果？我尝试了swiper，但对我不起作用。

需要什么

上下滚动箭头
吗？可以垂直滚动，但我在浏览器中看到正常的垂直滚动条，我可以垂直滚动。。。你能在一些例子或图片上告诉我们你需要什么样的滚动条吗？我的意思是当孩子超过5岁时，在父Div上创建一个垂直幻灯片。我编辑了我的问题。你可以设置
overflow-y:scroll，并将
高度设置为等于5个项目的高度。。。够了吗？
.category_sibe {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px 10px 0px 0px;
            background-color: rgba(126, 7, 209, 0.7);
            padding: 5px;
            cursor: pointer;
            width : 90px;
            height : 90px;
  
        }
        
        .category_parc {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 0px 0px;
            background-color: rgba(156, 72, 4, 0.7);
            padding: 5px;
            cursor: pointer;
            width : 90px;
            height : 90px;
        }
        
        .category_daya {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 0px 0px;
            background-color: rgba(7, 116, 209, 0.7);
            padding: 5px;
            cursor: pointer;
            width : 90px;
            height : 90px;
        }
        
        .category_faune {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 0px 0px;
            background-color: rgba(252, 154, 0, 0.7);
            padding: 5px;
            cursor: pointer;
            width : 90px;
            height : 90px;
        }
        
        .category_biotope {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 10px 10px;
            background-color: rgba(31, 180, 7, 0.7);
            padding: 5px;
            cursor: pointer;
            width : 90px;
            height : 90px;
        }