问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
643104191
    2.5k21137

    问题描述

    需要在页面里实现个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又不能横向滚动,

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

    前端overflowpositioncsssafari
    阅读 7.2k
    3 个回答
    得票最新
    头像
    ermu
      50017
      ✓ 已被采纳
      <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...

      头像
      厦冰
        8.5k52638
        overflow-x
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题