当前位置：网站首页>There are many contents in the widget, so it is a good scheme to support scrolling

There are many contents in the widget, so it is a good scheme to support scrolling

2022-06-26 13:20:00 【YSoup】

Preface

For those who have written about Android Nativity , May follow the thought pattern , Use directly in small programs scroll-view To achieve scrolling . This is actually a bad idea , Because it has been written in the wechat applet document , When using vertical scrolling , Need to give scroll-view To specify a Fixed height , Here's the picture ：
Insert picture description here
Are you kidding me? , When the list is small , Specify fixed height , That's bound to leave a lot of room , Are you ugly ？ Such as below , The gray area is the scrolling area , The list has only two items ：

Insert picture description here
What I want to do is , Let the scrolling area just wrap the contents , Only to a certain extent , The scrolling effect appears . I tried to give scroll-view Tag plus height:fit-content And the designation max-height attribute , But for the scroll-view Come on , It's no use at all .

terms of settlement

The solution is very simple , Use css Of overflow Properties will do , Don't use scroll-view label , The code is as follows ：

<!DOCTYPE html>
<html>

<head>
    <title> Rolling test </title>
    <style> .scrollDiv {
       max-height: 200px; background: #aaa; overflow: auto; } </style>
</head>

<body>
    <div class="scrollDiv">
        <ol>
            <li> Cow cat </li>
            <li> Orange cat </li>


        </ol>
    </div>
</body>

</html>

It specifies overflow: auto And maximum height max-height: 200px; after , Then I can achieve the effect I want . Insufficient content height 200px when , There is no scrolling effect , When there are more and more kinds of cats , The content height exceeds 200px after , A scrolling effect will appear . In this way , There will not be a lot of white space in the scrolling area . Of course , Here I take it directly HTML For example , The above css The style also applies to applets .

原网站

版权声明
本文为[YSoup]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206261135498223.html

边栏推荐

猜你喜欢

随机推荐