横向吸顶,父级div横向滚动条滑动,子级div位置不变(demo)

<template>
  <div class="parent">
    <div class="child-fixed">
      <!-- 这里放置子级内容 -->
      我是子级内容
    </div>
  </div>
</template>

<style>
.parent {
  overflow-x: auto;
  white-space: nowrap;
  width: 1500px;
  height: 80px;
  background-color: rgb(206, 100, 25);
  position: relative;
}

.child-fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: white;
}
</style>

<script>
export default {
  data() {
    return {
      parentWidth: 0,
    };
  },
  mounted() {
    this.parentWidth = this.$refs.parent.clientWidth;
  },
  watch: {
    parentWidth(newVal) {
      this.$refs.childFixed.style.width = newVal + "px";
    },
  },
};
</script>