固定定位的问题

Question

标签结构

<div class="swiper-container">
    <section class="swiper-banner">
      <div>banner1</div>
      <div>banner2</div>
      <div>banner3</div>
    </section>
    <aside></aside>
    <aside></aside>
    <section class="swiper-dot">
      <div class="swiper-dot-item swiper-dot-item-active"></div>
      <div class="swiper-dot-item"></div>
      <div class="swiper-dot-item"></div>
    </section>
  </div>

banner及底部按钮的样式

.swiper-banner div {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swiper-dot {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, 180px);
  }

当在使用固定定位的时候，如果swiper-banner不使用overflow: scroll/auto时，swiper-dot并没有实现固定定位的效果（随着banner滑动而滑动），请问老师这个是为什么呢？

Answer 1

西门老舅 2021-12-03 22:16:58

你好，这有可能是模拟器的问题，我拿真机测试过，固定定位的元素不会出现位置滑动的问题。

• 提问者 _jmxiao #1

  谢谢老师，我在真机上试了确实没有这个问题，但是在chrome的模拟器上有这个问题。而且在ios上面加了overflow:scroll滑动不是很流畅

• 西门老舅 回复 提问者 _jmxiao #2

  可以了解一下-webkit-overflow-scrolling:touch ,这个可以使滑动流畅。还有一些框架也可以做滑动，比如：iscroll、better-scroll 等

• 提问者 _jmxiao 回复 西门老舅 #3

  非常感谢！