div内容溢出后，内容向左悬浮，vue组件封装

<template>
  <div ref="containerRef" class="overflow-left-container">
    <div ref="contentRef" class="overflow-left-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const containerRef = ref<HTMLDivElement>();
const contentRef = ref<HTMLDivElement>();
let destroyFunction: () => void;

const processOverflow = () => {
  const containerEl = containerRef.value!;
  const contentEl = contentRef.value!;
  const isOverflow = contentEl.offsetWidth > containerEl.offsetWidth;
  if (isOverflow) {
    contentEl.classList.add('is-overflow');
  } else {
    contentEl.classList.remove('is-overflow');
  }
};

onMounted(() => {
  const el = contentRef.value!;
  const observer = new ResizeObserver(() => {
    processOverflow();
  });
  observer.observe(el);
  destroyFunction = () => {
    observer.disconnect();
  };
});

onUnmounted(() => {
  if (destroyFunction) {
    destroyFunction();
  }
});
</script>

<style lang="scss" scoped>
.overflow-left-container {
  position: relative;
  width: 100%;
  height: 100%;

  .overflow-left-content {
    width: fit-content;
    height: 100%;
    white-space: nowrap;

    &.is-overflow {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
</style>