请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

开发问题 样式不支持overflow的替代解决方法

8
回复
2451
查看
[复制链接]

1

主题

5

帖子

30

积分

 楼主| 2020-7-1 16:12:23 显示全部楼层 |阅读模式
如题,快应用不支持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感觉不正规; 请问有其他的解决方案吗? 另附上结构示意图
WX20200701-161132.png
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-7-1 16:16:16 显示全部楼层
不使用list和list-item时候的效果,元素被挤压,设置overflow-y为scroll提示不支持
WX20200701-161600.png
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-7-1 16:24:42 显示全部楼层
遮罩、窗口父元素、子元素,大概代码如下 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. }
复制代码
子元素高度被压缩,效果图如下
WechatIMG137.png
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-7-1 16:28:47 显示全部楼层
此时如果把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的情况实现如下效果吗 效果图如下
WX20200701-162650.png
回复

使用道具 举报

2020-7-2 15:40:55 显示全部楼层
给list-item设置pdding:0,不设置高度,让它由子元素撑开
回复

使用道具 举报

1

主题

5

帖子

30

积分

 楼主| 2020-7-2 18:49:38 显示全部楼层
vivo官方技术团队 发表于 2020-7-2 15:40 给list-item设置pdding:0,不设置高度,让它由子元素撑开
用list和list-item可以实现效果,但是根据文档“相同 type 属性的 list-item, DOM 结构必须完全相同”,此处不适合使用list。 所以请问有什么替代list方法吗?

点评

type不一样不就可以了?目前只有list有滑动效果,如果用div会被压缩。  详情 回复 发表于 2020-7-6 11:02
回复

使用道具 举报

2020-7-6 11:02:05 显示全部楼层
廖亚军 发表于 2020-7-2 18:49 用list和list-item可以实现效果,但是根据文档“相同 type 属性的 list-item, DOM 结构必须完全相同”, ...
type不一样不就可以了?目前只有list有滑动效果,如果用div会被压缩。
回复

使用道具 举报

5

主题

11

帖子

80

积分

2020-7-6 16:50:05 显示全部楼层
本帖最后由 sanmaoyou 于 2020-7-6 16:51 编辑
vivo官方技术团队 发表于 2020-7-6 11:02 type不一样不就可以了?目前只有list有滑动效果,如果用div会被压缩。
请问如何实现图中所示,页面部分区域的文字滚动
微信图片_20200706164942.png
回复

使用道具 举报

4

主题

10

帖子

70

积分

2020-7-20 19:40:13 显示全部楼层
请问您实现这个了么
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册