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

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

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

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 显示全部楼层

请问您实现这个了么
回复

使用道具 举报

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