ios上網(wǎng)頁元素position fixed后overflow問題

問題描述

需要在頁面里實現(xiàn)個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;
  }
}

頁面出來的效果

當向上彈性滾動時

文字會莫名消失

看下圖

消失前一瞬間

消失前一瞬間

消失后

消失后

這是視頻地址

點擊查看視頻

目前發(fā)現(xiàn)是#test-fixed的overflow引起的

當#test-fixed不寫任何overflow的時候,彈性拖拽就不會把文字弄沒

但是不寫overflow又不能橫向滾動,

問下大佬們有什么解決辦法

回答

編輯回答

萌面人

<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布局渲染會存在問題，可根據(jù)這個思路去排查一下。
參考：
http://www.cnblogs.com/skywea...
https://www.zhangxinxu.com/wo...

2018年1月19日 20:43

編輯回答