解决h5移动端布局有垂直滚动条,底部fixed定位元素在IOS下定位失效,跟随滚动条滚动的问题

h5移动端经常会有固定在底部的按钮
解决h5移动端布局有垂直滚动条,底部fixed定位元素在IOS下定位失效,跟随滚动条滚动的问题_第1张图片
这种布局惯用的就是给底部元素fixed定位,然而在IOS下,如果内容很长有滚动条,滚动的时候fixed定位的元素会跟随滚动,特别是当蓝色内容部分有input元素的时候更容易出现跟随滚动的现象,安卓下无此现象。
解决办法:
禁止html滚动,给蓝色框添加滚动条,这样内容就在蓝色框里滚动,红色框absolute定位在底部即可。记得给蓝色框一个padding-bottom高度大于等于红色框高度即可,这样给红色框留出位置,不然最下面的内容会被红色框遮挡。
上代码:




  
  
  Title
  


  • 内容1
  • 内容2
  • 内容3
  • 内容4
  • 内容5
  • 内容6
  • 内容7
  • 内容8
我是底部定位的按钮

戳链接看效果
手机扫码看效果
解决h5移动端布局有垂直滚动条,底部fixed定位元素在IOS下定位失效,跟随滚动条滚动的问题_第2张图片

你可能感兴趣的:(技术坑,android,ios,web,app)