美文网首页
-webkit-overflow-scrolling: touc

-webkit-overflow-scrolling: touc

作者: Mr老朝 | 来源:发表于2018-12-04 17:56 被阅读0次

出现黑色背景原因:

对于设置了-webkit-overflow-scrolling的元素,原生会创建一个UIScrollView,在UIScrollView上一层会生成一个WKCompositingView,我们看到的黑色正是这个WKCompositingView的颜色。
WKCompositingView的颜色由-webkit-overflow-scrolling元素和-webkit-overflow-scrolling元素的子元素决定。
要出现黑色背景的条件:
1、-webkit-overflow-scrolling元素设置了背景色。
2、-webkit-overflow-scrolling元素有包围功能的子元素,并且设置了背景色。
3、ios11及以下
4、-webkit-overflow-scrolling元素的子元素超出-webkit-overflow-scrolling元素范围,可以滚动起来。
例如下面的代码:

#app{
  height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: blue;
}

#page{
  background: red;
}
.content{
  height: 70px;
}
<div id="app">
  <div id="page">
    <div class="content">1</div>
    <div class="content">2</div>
  </div>
</div>
或者
<div id="app">
  <div>
    <div id="page">
      <div class="content">1</div>
      <div class="content">2</div>
    </div>
  </div>
</div>

下拉就会出现黑底问题:


menu.saveimg.savepath20181204174630.jpg

解决方法:

方法有:
1、#app,#page的background删掉一个就好;
2、删除#app的background,把background设置为#app的父元素。

相关文章

网友评论

      本文标题:-webkit-overflow-scrolling: touc

      本文链接:https://www.haomeiwen.com/subject/mcdvcqtx.html