【vue】页面样式存在zoom 属性值不为1，实现公告列表滚动

页面中父容器的zoom属性：

先上效果图：

template部分的代码及注释：

  <!-- 父节点即parent节点高度给一个固定值，并且小于child的高度值 -->
 <div class="parent" ref="parent">
   <div ref="child1" class="child" :style="{'transform':'translateY('+`${-topNum}`+'px'}">
     <div class="item-contain" v-for="item in list" :title="item.title" :key="item.id">
       <span class="left-ctn">{{ item.title}}</span>
     </div>
   </div>
   <!-- 溢出滚动，无缝效果 -->
   <div ref="child1" class="child" :style="{'transform':'translateY('+`${-topNum}`+'px'}">
     <div class="item-contain" v-for="item in list" :title="item.title" :key="item.id">
       <span class="left-ctn">{{ item.title}}</span>
     </div>
   </div>
 </div>

js逻辑

 data() {
    return {
      list: [],
      timer: null,
      topNum: 0,
    };
  },
  watch: {
    "newsList.length"(val) {
      if (val > 0) {
        this.$nextTick(() => {
          this.scrollCard();
        });
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
    this.timer = null;
  },
  methods: {
    scrollCard() {
      let self = this;
      let parent = this.$refs.parent;
      let child1 = this.$refs.child1;
      this.topNum = 0;
      let sHeight = child1.clientHeight;
      if (self.timer == null) {
        self.timer = setInterval(function () {
          if (self.topNum >= sHeight) {
            self.topNum = 0;
          } else {
            self.topNum++;
          }
          /**在页面样式中zoom属性值 === 1 的时候,父节点的scrollTop 可以获取到值，并且自增有效
           * 当 zoom属性值 !== 1 的时候，父节点的scrollTop 可以获取到值，但是自增无效，一直是0
           * 所以不用scrollTop自增来实现滚动
           */
          // if (parent.scrollTop >= child1.scrollHeight) {
          //   parent.scrollTop = 0;
          // } else {
          //   parent.scrollTop++;
          // }
        }, 80);
      }
      parent.onmouseover = function () {
        clearInterval(self.timer);
        self.timer = null;
      };
      parent.onmouseout = function () {
        self.timer = setInterval(function () {
          if (self.topNum >= sHeight) {
            self.topNum = 0;
          } else {
            self.topNum++;
          }
        }, 80);
      };
    },
  },

样式部分的代码

<style lang="less" scoped>
.parent {
  height: 300px;
  margin: 0 auto;
  overflow-y: scroll;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
.parent::-webkit-scrollbar {
  height: 3px;
  width: 0px;
}
//ie浏览器无法设置滚动条的宽度，以内容区背景色填充宽度区域的颜色
.parent {
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #f1f1f1;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #f1f1f1;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #f1f1f1;
  /*滚动条阴影*/
  scrollbar-shadow-color: #f1f1f1;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #f1f1f1;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color: #f1f1f1;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #f1f1f1;
  /*滚动条基准颜色*/
  scrollbar-base-color: #f1f1f1;
}
.parent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #c8c5c5;
}
.parent::-webkit-scrollbar-track {
  border-radius: 0;
  background: #f8f1f1;
}
</style>

ps: MDN API 中有说到：

scrollTop 可以被设置为任何整数值，同时注意：如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。设置scrollTop的值小于0，scrollTop 被设为0如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

zoom值小于1的时候，scrollTop 的值自增无效，看着靠不上以上任何一条...