Vue JS - 滚动时如何在左侧添加像素

Question

我想让它在滚动时，具有block-1类的块的位置向右改变，即滚动时，它向右移动1个像素

这是给定的code in codesandbox

 <template>
      <div>
        <div class="scroll-block">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
          vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
          adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
          numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Corrupti distinctio architecto deleniti quas nihil. Illum possimus
          accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
          ratione numquam quod cumque aut.
        </div>
    
        <div class="block-1"></div>
      </div>
    </template>

    <style scoped>
    .scroll-block {
      width: 200px;
      overflow: scroll;
      height: 200px;
      background: red;
    }
    .block-1 {
      width: 100px;
      height: 100px;
      background: yellow;
    }
    </style>

Answer 1

只需处理滚动事件并更改框位置。

<template>
  <div>
    <div class="scroll-block" @scroll="onScroll">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
      vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
      adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
      numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Corrupti distinctio architecto deleniti quas nihil. Illum possimus
      accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
      ratione numquam quod cumque aut.
    </div>

    <div class="block-1" :style="block1Style"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      block1Left: 0,
      timerId: null,
    }
  },
  computed: {
    block1Style() {
      return {
        left: `${this.block1Left}px`,
      }
    }
  },
  methods: {
    onScroll() {
      this.block1Left++;
    }
  }
};
</script>

<style scoped>
.scroll-block {
  width: 200px;
  overflow: scroll;
  height: 200px;
  background: red;
}
.block-1 {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
}
</style>