position fixed 在ios上滑动不固定问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position fixed 在ios上滑动不固定问题相关的知识,希望对你有一定的参考价值。
参考技术A 1、方法一:将fixed定位的内容移出 滚动视图外2、方法二:在使用position:fixed的元素上加上transform: translateZ(0);
问题结构
方法一:
方法二:
ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击。
有些人肯定就说了,这还不简单,position:fixed;
但是在ios这个坑货系统上这个position:fixed这个css属性就会失效,你懂的,苹果就是搞特殊,下面我就用css来解决这个问题。
1.这个是要滑动的内容的css:
.page-content { overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100%; position: relative; z-index: 1; }
暂且我就将它的内容区域命名page-content,即html内容为
<div class="page-content">这个是可以滑动的内容区域</div>
2.这个是固定在页面上的区域:
<div class="scroll-page">这个是按钮</div>
.scroll-page{ position: fixed; bottom: 0; width: 100%; height: 50px; background: #f8105c; color: white; text-align: center; line-height: 50px; font-size: 18px; z-index: 99; }
这样的话可以完美解决这个fixed在ios上失效的问题。亲测有效!!!!!!网上搜的其它方法,大都有这样那样的问题
以上是关于position fixed 在ios上滑动不固定问题的主要内容,如果未能解决你的问题,请参考以下文章
h5使用position:fixed将div固定之后,如何实现鼠标在div内的时候,滑动滚轮只有div滚动,而非整个页面滚动?