滚动滑行并隐藏滚动条

要实现的效果：

在固定高度内模块的个数不确认，如果超过两行滚动滑行没有超过则默认展示，要求滚动条隐藏

先上效果图：

 

 

html: 

1 <div class="main_page">
2     <div class="box_list">
3         <div class="box_row"></div>
4         <div class="box_row"></div>
5             ...
6         <div class="box_row"></div>
7     </div>
8 </div>

css: 

 1 .main_page {
 2     width: 300px;
 3     height: 300px;
 4     overflow: hidden;
 5     border: 1px solid #5214e2;
 6     position: relative;
 7 }
 8 .box_list {
 9     overflow-y: scroll;
10     overflow-x: hidden;
11     position: absolute;
12     top: 0;
13     bottom: 0;
14     width: calc(100% + 20px);
15 }
16 .box_row {
17     border: 1px solid #999;
18     width: 100%;
19     height: 40px;
20     background: #ffeedd
21 }

 

 

 最外面一层div一定有高度，否则显示不出来！！

 

posted @ 2020-09-02 14:18  进击的木头ya  阅读(174)  评论(0)    收藏  举报