样式不支持overflow的替代解决方法

廖亚军

如题，快应用不支持overflow/overflow-x/overflow-y，有什么替代方案？ 场景：一个吸底的窗口，窗口内的内容需要滚动，默认的div如果子元素超出，会挤压子元素高度； 普通网页的常见方法是设置flex-shrink: 0;禁止元素被压缩，然后设置父元素overflow-y: scroll;，实现超出窗口时候可以滚动； 现在快应用不支持overflow-y，使用list和list-item可以滚动，但是窗口里面的内容是由二维数组循环出来的内容，list-item的type写死不满足list的“相同 type 属性的 list-item， DOM 结构必须完全相同”要求，但是动态的type感觉不正规； 请问有其他的解决方案吗？ 另附上结构示意图

廖亚军

不使用list和list-item时候的效果，元素被挤压，设置overflow-y为scroll提示不支持

廖亚军

遮罩、窗口父元素、子元素，大概代码如下 dom结构

1. <div class="mask">
2. <div class="father-box">
3. <div class="son-box"></div>
4. <div class="son-box"></div>
5. <div class="son-box"></div>
6. </div>
7. </div>

复制代码

css样式

1. .mask {
2. position: fixed;
3. top: 0;
4. z-index: 9;
5. width: 100%;
6. height: 100%;
7. background-color: rgba(0, 0, 0, 0.4);
8. }
9. .father-box {
10. position: absolute;
11. bottom:0;
12. width: 100%;
13. height: 820px;
14. flex-direction: column;
15. align-items: center;
16. background-color: #FFFFFF;
17. }
18. .son-box {
19. margin-top: 20px;
20. width: 100%;
21. height: 400px;
22. background-color: cyan;
23. }

复制代码

子元素高度被压缩，效果图如下

廖亚军

此时如果把dom结构换成list，则高度不压缩，代码如下

1. <div class="mask">
2. <list class="father-box">
3. <list-item class="son-box"></list-item>
4. <list-item class="son-box"></list-item>
5. <list-item class="son-box"></list-item>
6. </list>
7. </div>

复制代码

请问可以在不使用list的情况实现如下效果吗 效果图如下

vivo官方技术团队

给list-item设置pdding：0，不设置高度，让它由子元素撑开

廖亚军

vivo官方技术团队 发表于 2020-7-2 15:40 给list-item设置pdding：0，不设置高度，让它由子元素撑开

用list和list-item可以实现效果，但是根据文档“相同 type 属性的 list-item， DOM 结构必须完全相同”，此处不适合使用list。 所以请问有什么替代list方法吗？

vivo官方技术团队

廖亚军 发表于 2020-7-2 18:49 用list和list-item可以实现效果，但是根据文档“相同 type 属性的 list-item， DOM 结构必须完全相同”， ...

type不一样不就可以了？目前只有list有滑动效果，如果用div会被压缩。

sanmaoyou

vivo官方技术团队 发表于 2020-7-6 11:02 type不一样不就可以了？目前只有list有滑动效果，如果用div会被压缩。

请问如何实现图中所示，页面部分区域的文字滚动

caicai

sanmaoyou 发表于 2020-7-6 16:50

请问您实现这个了么