网站页面放大缩小带来的问题

搞个锤子哟2025-09-09 19:15

页面放大缩小导致v-infinite-scroll失效

v-infinite-scroll 通常通过比较 scrollTop + clientHeight 和 scrollHeight 来判断是否接近底部。页面放大后，这些 DOM 属性的值可能因缩放而产生计算偏差，导致条件永远不满足。
infinite-scroll-distance的默认值是0，而页面ctrl+滚轮放缩后，上面的运算的差永远不是0，导致无法触发scrollToBottom事件，把值改成20即可

js 复制代码

  <div class="scroll-container"
       v-infinite-scroll="scrollToBottom"
       infinite-scroll-distance="20">
  </div>
  
      async scrollToBottom() {
      // 虽然可以通过增加属性 infinite-scroll-disabled 来禁用，在js里通过这样直接禁用也省事
      if (this.inLoading || this.finished) return
      this.getListParams.pageIndex++
      const appendList = await this.getList()
      this.list = [...this.list, ...appendList]
    },

页面禁止放大缩小

转自文章 blog.csdn.net/weixin_3994...

js 复制代码

    forbiddenZoomChange() {
      // 禁止ctrl+ +/- 缩放
      document.addEventListener(
        'keydown',
        function (event) {
          if (
            (event.ctrlKey === true || event.metaKey === true) &&
            (event.keyCode === 61 ||
              event.keyCode === 107 ||
              event.keyCode === 173 ||
              event.keyCode === 109 ||
              event.keyCode === 187 ||
              event.keyCode === 189)
          ) {
            event.preventDefault()
          }
        },
        false
      )
      // 禁止ctrl+滚轮 缩放
      document.addEventListener(
        'mousewheel',
        function (e) {
          e = e || window.event
          if ((e.wheelDelta && event.ctrlKey) || e.detail) {
            event.preventDefault()
          }
        },
        { passive: false }
      )
      // 禁止触摸缩放
      document.documentElement.addEventListener(
        'touchstart',
        function (event) {
          if (event.touches.length > 1) {
            event.preventDefault()
          }
        },
        { passive: false }
      )
      // 禁止双击放大
      let lastTouchEnd = 0
      document.documentElement.addEventListener(
        'touchend',
        function (event) {
          var now = Date.now()
          if (now - lastTouchEnd <= 300) {
            event.preventDefault()
          }
          lastTouchEnd = now
        },
        { passive: false }
      )
    }