浏览器窗口缩小到一定比例，scrollTop无法修改

Question

浏览器窗口缩小到一定比例，scrollTop无法修改,100%及以上的窗口是正常

  <div ref="box" class="container">
    <div class="content" ref="box2">
      <div class="body"></div>
    </div>
  </div>

  .container {
    height: 300px;
    overflow-y: scroll;
    .content {
      background: aquamarine;
      .body {
        height: 600px;
      }
    }
  }

js部分

  mounted() {
    this.$nextTick(() => {
      this.aniamte()
    })
  },
  methods: {
    aniamte() {
      const dom = this.$refs.box
      const dom2 = this.$refs.box2
      dom.scrollTop++
      if (dom.clientHeight + dom.scrollTop < dom2.clientHeight) {
        window.requestAnimationFrame(this.aniamte)
      } else {
        dom.scrollTop = 0
        window.requestAnimationFrame(this.aniamte)
      }
    }
  },

当浏览器缩到75%的时候滚动条就动不了,在火狐浏览器中可正常使用，但是无法重置scrollTop

Answer 1

浏览器缩放的时候,scrollTop + 1会被设置成 1 * window.devicePixelRatio, 如果结果小于1就会被判定成+ 0, 所以需要保证每次变化的值大于1

const ratio = parseFloat((1 /  window.devicePixelRatio).toFixed(2) ) + 0.01 // + 0.01 为了保证 ratio >= 1
dom1.scrollTop = dom1.scrollTop + ratio