移动端列表表头fix布局的改进

最新推荐文章于 2024-10-26 21:39:56 发布

BenjaminShih

最新推荐文章于 2024-10-26 21:39:56 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript css 文章标签： fix卡死 fix改良布局移动端

本文链接：https://blog.youkuaiyun.com/sjn0503/article/details/78269491

javascript 同时被 2 个专栏收录

41 篇文章

订阅专栏

css

18 篇文章

订阅专栏

在移动端开发中，由于iOS设备的兼容性问题，使用`position: fix`布局可能导致页面元素卡死或点击失效。本文提出使用flex布局作为替代方案，通过将表头和列表视为两大部分，设置其父元素为flex布局，垂直方向排列，并确保子元素不伸缩。表头设置固定高度，列表内容区域则占据剩余高度并启用内部滚动，从而解决fix布局带来的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前在做PC端开发的时候，经常会使用position: fix来做一些固定于窗口位置的一些页面功能，比如全局居中的提示框和模态框，或者是页头页脚等等~但是在移动端做的时候长了就会发现，我们要在一些场合避免使用fix布局，就目前来看，主要有以下两个原因：

1. 公司项目曾经使用h5套壳app，在ios上发现，如果列表页中使用fix固表头，那么有有一定几率会造成页面元素
无法点击甚至卡死的现象
2. iphone6的微信中，表头使用fix布局后在滑动列表的过程中点击表头，很大概率会造成表头消失（移动到其他位置），
但是下拉或者刷新页面重新渲染页面后就会复位的现象

这个时候，我们就要祭出我们的神器，使用flex布局来代替原来的fix布局，整个过程的核心思路为：

将表头和列表视作两大部分，它们的父元素设置display: flex，总高度为视口高度100vh，
并且设置布局方向为垂直flex-direction: column, 子元素不伸缩 flex-shrink: 0
将表头固定高度
列表主题部分设置撑开父元素高度除了表头固定高度的剩余全部高度，然后内部滚动overflow: auto, 别忘记设置IOS上流畅滑动属性-webkit-overflow-scrolling: touch

done~

源码如下：


.container {
  height 100vh
  display flex
  flex-direction column
  flex-shrink 0
  .list-header {
    height 88px
  }
  .list-body {
    flex 1
    overflow auto
    -webkit-overflow-scrolling touch

  }
}