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

难上照子隆
  • 16

浏览器窗口缩小到一定比例,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

回复
阅读 613
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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏