在safari上，解决fixed失效问题

一个页面中有头部、底部和中间内容区域，底部固定在屏幕底端。

头部header

内容main

底部footer

方法一、在main上使用fixed定位，加上overflow-y属性。

.main {

    position: fixed;

    top: 50px;

    bottom: 50px;

    overflow-y: scroll;

}

不推荐这个fixed方案，因为页面偶尔卡住不动。

方法二、中间的main不设定位，高度100%，再padding头部和尾部，

　　其中头部和底部的定位设为absolute会比设为fixed体验更好（况且fix布局在移动端本来就有各种各样的问题，还是尽量避开:) ）。

  html, body {

   height: %;

  }

  main {

      padding: 50px ;

      height: %;

      overflow-y: scroll;

      -webkit-overflow-scrolling: touch;

  }

　　ps:webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug

　　最常见的例子就是：

在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。
在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。
通过动态添加内容撑开容器，结果根本不能滑动的bug。

1）保证使用了该属性的元素上没有设置定位

　　如果出现偶尔卡住不动的情况，那么在使用该属性的元素上不设置定位或者手动设置定位为 position: static

　　这样会解决部分因为定位(relative、fixed、absolute)导致的页面偶尔不能滚动的bug。

2）如果添加动态内容页面不能滚动，让子元素height+1

　　如果在-webkit-overflow-scrolling:touch属性的元素上，想通过动态添加内容来撑开容器，触发滚动，是有bug 的，页面是会卡住不动的。

　　方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。

main-inner {

    min-height: calc(% + 1px)

}

你也可以直接加伪元素上：

main:after {

    min-height: calc(% + 1px)

}

文章摘抄自：https://www.cnblogs.com/xiahj/p/8036419.html

巴特西

在safari上，解决fixed失效问题

最新文章

热门文章