ios上网页元素position fixed后overflow问题

643104191
  • 184

问题描述

需要在页面里实现个fixed在顶部,并能横向内容的bars
代码如下


<div id="test-fixed">
  <div class="text">这是文字1</div>
  <div class="text">这是文字2</div>
  <div class="text">这是文字3</div>
  <div class="text">这是文字4</div>
  <div class="text">这是文字5</div>
  <div class="text">这是文字6</div>
  <div class="text">这是文字7</div>
  <div class="text">这是文字8</div>
  <div class="text">这是文字9</div>
  <div class="text">这是文字10</div>
  <div class="text">这是文字11</div>
  <div class="text">这是文字12</div>
  <div class="text">这是文字13</div>
  <div class="text">这是文字14</div>
  <div class="text">这是文字15</div>
</div>
<div id="test-title">绿色的是距离页面顶部44px的线</div>

#test-wrap{
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  text-align: center;
  color: #0F0;
  border-bottom: 1px solid #0F0;
}
#test-flex{
  display: flex;
  height: 44px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #F00;
  -webkit-overflow-scrolling: touch;
  box-sizing: content-box;
  overflow: hidden;
  overflow-x: scroll;
  div.text{
    color: #999;
    line-height: 44px;
    font-size: 15px;
    flex: 0 0 auto;
    padding: 0 5px;
    box-sizing: border-box;
  }
}

页面出来的效果

当向上弹性滚动时

文字会莫名消失

看下图

  • 消失前一瞬间

消失前一瞬间

  • 消失后

消失后

这是视频地址

点击查看视频

目前发现是#test-fixed的overflow引起的

当#test-fixed不写任何overflow的时候,弹性拖拽就不会把文字弄没

但是不写overflow又不能横向滚动,

问下大佬们有什么解决办法

回复
阅读 4.4k
2 个回答
✓ 已被采纳
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
html,body{
    height: 2000px;
}
#test-wrap{
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  text-align: center;
  color: #0F0;
  border-bottom: 1px solid #0F0;
}
#test-flex{
  display: flex;
  height: 44px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #F00;
  -webkit-overflow-scrolling: touch;
  box-sizing: content-box;
  /*overflow: hidden;*/
  overflow: scroll;
}
.text{
    color: #999;
    line-height: 44px;
    font-size: 15px;
    flex: 0 0 auto;
    padding: 0 5px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
</style>
<body>
<div id="test-flex">
  <div class="text">这是文字1</div>
  <div class="text">这是文字2</div>
  <div class="text">这是文字3</div>
  <div class="text">这是文字4</div>
  <div class="text">这是文字5</div>
  <div class="text">这是文字6</div>
  <div class="text">这是文字7</div>
  <div class="text">这是文字8</div>
  <div class="text">这是文字9</div>
  <div class="text">这是文字10</div>
  <div class="text">这是文字11</div>
  <div class="text">这是文字12</div>
  <div class="text">这是文字13</div>
  <div class="text">这是文字14</div>
  <div class="text">这是文字15</div>
</div>
<div id="example">
    <p v-for="i in 1000">{{i}}</p>
</div>
</body>
<script>

var app = new Vue({
    el:'#example',
    data(){
        return{
            text:'123'
        }
    }
});

</script>
</html>

并没有测试出你这种情况,我认为是弹性拖拽的锅。在有transition动画的时候,fixed布局渲染会存在问题,可根据这个思路去排查一下。
参考:
http://www.cnblogs.com/skywea...
https://www.zhangxinxu.com/wo...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏