ios使用position: fixed固定到底部，滑动会出现抖动

超老师1024

已于 2023-06-05 11:18:31 修改

阅读量347

点赞数

文章标签： css html5 vue.js javascript safari

于 2023-06-05 10:46:07 首次发布

本文链接：https://blog.csdn.net/qq_36318956/article/details/131043504

版权

<template>
  <div class="background_all">
    <div>
      <!-- 商品页面（可滑动） -->
      <ul class="pro-part">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
      <!-- 底部置底 -->
      <div class="bbox">
        <div class="botoombox">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { };
  },
  mounted() { },
  methods: { }
};
</script>
<style lang="less" scoped>
.bbox {
  width: 100%;
  position: fixed;
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-overflow-scroll:touch;
}
.botoombox {
  background-image: url("../../images/n11.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 690px;
  height: 135px;
  -webkit-overflow-scroll:touch;
}
</style>

background-image: url("../../images/n11.png");为本地图片。

这里把

固定定位的box里的background-size：cover 改为background-size：100% 100%；滑动就不会抖动了。