css-滚动条挤压布局问题

如图

由于滚动条占据了右侧的容器宽度，导致容器被挤压，中间内容偏移

解决方案

动态判断是否存在滚动条，如果存在，则paddingr-right - 一般的滚动条宽度,

import {Directive, watch, watchEffect} from "vue";
import {useDraggable} from "@vueuse/core";
import {FunctionExecUtil} from "../util/function-util";

export default {
  mounted(el: HTMLElement, binding) {
    if (!el) {
      return;
    }
    const className = "has-scrollbar";
    const observer = new ResizeObserver(() => {
      const hasScroll = el.scrollHeight > el.clientHeight;
      if (hasScroll) {
        el.classList.add(className);
      }
      else {
        el.classList.remove(className);
      }
    });
    observer.observe(el);

    // 存储清理函数
    el._scrollBarClassCleanup = () => {
      observer.disconnect();
    };
  },
  unmounted(el) {
    el._scrollBarClassCleanup?.();
  }
} as Directive;

用法

<div v-scrollbar-class>
</div>