diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 9150d00c456d7b9d20fb58f95e4f4bdf13a578f3..e332b52f4cc67877e5561e6b2abef9f321ad537e 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index a4fe8567bc93aadc6d3ec45d48d09a9eaba8a71b..0694d5f356c627c77994f57b467bf27eeabea039 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -2,7 +2,7 @@ import { isArray } from './is';
 
 export type DirectionT = 'left' | 'right' | 'top' | 'bottom';
 
-export function isElement(el: any) {
+export function isHtmlElement(el: any) {
   return typeof HTMLElement === 'object'
     ? el instanceof HTMLElement
     : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string');
diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/components/_shared/vue-utils.ts
index 107577a3ed07dc97c414f2b415c3798a6c07f8a4..50ac3a4b8620455f547a2f88652521bee3c63949 100644
--- a/packages/opendesign/src/components/_shared/vue-utils.ts
+++ b/packages/opendesign/src/components/_shared/vue-utils.ts
@@ -1,5 +1,6 @@
-import { Component, onMounted, ref, Slots, VNode, VNodeTypes, Comment } from 'vue';
+import { Component, onMounted, ref, Slots, VNode, VNodeTypes, Comment, ComponentPublicInstance, watchEffect, Ref } from 'vue';
 import { isArray } from './is';
+import { isHtmlElement } from './dom';
 
 // 来着vuejs/core
 // https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts
@@ -154,3 +155,21 @@ export function useSlotFirstElement() {
     fistElement,
   };
 }
+
+export const getHtmlElement = (elRef: Ref<string | ComponentPublicInstance | HTMLElement | null>): Promise<HTMLElement | null> => {
+  return new Promise((resolve) => {
+    if (isHtmlElement(elRef.value)) {
+      resolve(elRef.value as HTMLElement);
+    } else if (typeof elRef.value === 'string') {
+      resolve(document.querySelector(elRef.value) as HTMLElement);
+    } else {
+      watchEffect(() => {
+        if (isHtmlElement(elRef.value)) {
+          resolve(elRef.value as HTMLElement);
+        } else if (elRef.value) {
+          resolve((elRef.value as ComponentPublicInstance).$el);
+        }
+      });
+    }
+  });
+};
diff --git a/packages/opendesign/src/components/carousel/effect.ts b/packages/opendesign/src/components/carousel/effect.ts
index 38fee0b6e38ad36bb05b82b323752d2ea6f4a30a..0f3d1816fcd45d73e73ea301ec21c68f2fdd541c 100644
--- a/packages/opendesign/src/components/carousel/effect.ts
+++ b/packages/opendesign/src/components/carousel/effect.ts
@@ -7,7 +7,7 @@ export interface EffectT {
   destroyed: () => void;
 }
 export interface EffectOptionT {
-  activeClass: string;
+  activeClass?: string;
   onTouchstart?: () => void;
   onTouchend?: () => void;
   onBeforeChange?: (from: number, to: number) => boolean | void;
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index f60bd93fb3f24646f5f7198b8fc9814a0829850e..869fb4ea058d36aace273526e9075d7d0b2ba2d3 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -27,6 +27,20 @@ let numberValue = getRealValue(currentValue.value);
 let lastNumberValue = numberValue;
 let lastInputValue = currentValue.value;
 
+watch(
+  () => props.min,
+  (v) => {
+    isValid.value = isValidNumber(currentValue.value, v, props.max);
+  }
+);
+
+watch(
+  () => props.max,
+  (v) => {
+    isValid.value = isValidNumber(currentValue.value, props.min, v);
+  }
+);
+
 watch(
   () => props.modelValue,
   (val) => {
diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
index d4cd6f2f4cf5bb965ec222bc5cee495d6bce3ab2..c38c88b2f11ecb5984f69a91e9e905cb1f80c4fd 100644
--- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
@@ -2,11 +2,10 @@
 import { ref } from 'vue';
 import { OPagination } from '../index';
 const currentPage = ref(5);
-const total = ref(100);
-
-// setTimeout(() => {
-//   total.value = 50;
-// }, 2000);
+const total = ref(0);
+setTimeout(() => {
+  total.value = 100;
+}, 1000);
 
 const pageSize = 8;
 const pageSizes = [8, 16, 32, 64];
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 01b23606733546a82e3213760805a4a0815b096e..3b02f5e4f025fa4491b4eb40df82dcae0158bc16 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -4,9 +4,9 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, ComponentPublicInstance, computed } from 'vue';
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, ComponentPublicInstance, computed, toRefs } from 'vue';
 import { popupProps } from './types';
-import { isElement, getScrollParents } from '../_shared/dom';
+import { isHtmlElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { isArray } from '../_shared/is';
 import { calcPopupStyle, bindTrigger, getTransformOrigin } from './popup';
@@ -16,6 +16,7 @@ import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 import { OChildOnly } from '../child-only';
 import ClientOnly from '../_shared/components/client-only';
+import { getHtmlElement } from '../_shared/vue-utils';
 
 // TODO 处理嵌套
 
@@ -63,28 +64,43 @@ onMounted(() => {
   // 在mounted事件后再显示，避免找不到wrapper
   visible.value = props.visible;
 
-  // 触发元素为dom或者选择器，处理事件触发
-  nextTick(() => {
-    if (!wrapperEl.value) {
-      if (typeof props.wrapper === 'string') {
-        wrapperEl.value = document.querySelector(props.wrapper);
-      } else {
-        wrapperEl.value = props.wrapper;
-      }
+  const { target, wrapper } = toRefs(props);
+  // 绑定触发元素事件
+  getHtmlElement(target).then((el) => {
+    if (el) {
+      bindTargetEvent(el);
     }
+  });
 
-    // 绑定触发元素事件
-    if (typeof props.target === 'string') {
-      bindTargetEvent(document.querySelector(props.target));
-    } else if (isElement(props.target)) {
-      bindTargetEvent(props.target as HTMLElement);
+  // 获取挂载容器
+  getHtmlElement(wrapper).then((el) => {
+    if (el) {
+      wrapperEl.value = el;
     }
-
-    // 初始为true时，更新样式
-    // if (visible.value) {
-    //   updatePopupStyle();
-    // }
   });
+
+  // 触发元素为dom或者选择器，处理事件触发
+  // nextTick(() => {
+  // if (!wrapperEl.value) {
+  //   if (typeof props.wrapper === 'string') {
+  //     wrapperEl.value = document.querySelector(props.wrapper);
+  //   } else {
+  //     wrapperEl.value = props.wrapper;
+  //   }
+  // }
+
+  // 绑定触发元素事件
+  // if (typeof props.target === 'string') {
+  // bindTargetEvent(document.querySelector(props.target));
+  // } else if (isHtmlElement(props.target)) {
+  // bindTargetEvent(props.target as HTMLElement);
+  // }
+
+  // 初始为true时，更新样式
+  // if (visible.value) {
+  //   updatePopupStyle();
+  // }
+  // });
 });
 
 let triggerListener: ReturnType<typeof bindTrigger> = [];
@@ -238,17 +254,17 @@ const updateVisible = (isVisible?: boolean, delay?: number) => {
 };
 
 // 触发元素为组件ref，因生命周期问题，延后绑定处理事件触发
-watch(
-  () => props.target,
-  (ele) => {
-    if (isElement((ele as ComponentPublicInstance)?.$el)) {
-      bindTargetEvent((ele as ComponentPublicInstance).$el);
-    }
-  }
-);
+// watch(
+//   () => props.target,
+//   (ele) => {
+//     if (isHtmlElement((ele as ComponentPublicInstance)?.$el)) {
+//       bindTargetEvent((ele as ComponentPublicInstance).$el);
+//     }
+//   }
+// );
 
 watch(targetElRef, (elRef) => {
-  if (isElement(elRef?.$el)) {
+  if (isHtmlElement(elRef?.$el)) {
     bindTargetEvent(elRef?.$el);
   }
 });
diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scrollbar/OScrollbar.vue
deleted file mode 100644
index a3891b87bd8d9dae847a5df0b8091e8b32a82d82..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/OScrollbar.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div></div>
-</template>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
deleted file mode 100644
index 39b8f290b0528de46f0cb650ca6d18c81a99b840..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { OScrollbar } from '../index';
-</script>
-<template>
-  <h4>resize observer</h4>
-
-  <OScrollbar />
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/components/scrollbar/index.ts b/packages/opendesign/src/components/scrollbar/index.ts
deleted file mode 100644
index d55162bde6686f65c0bee837307855c86daf8ac4..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { App } from 'vue';
-
-import _OScrollbar from './OScrollbar.vue';
-
-const OScrollbar = Object.assign(_OScrollbar, {
-  install(app: App) {
-    app.component(_OScrollbar.name, _OScrollbar);
-  },
-});
-
-export { OScrollbar };
diff --git a/packages/opendesign/src/components/scrollbar/scrollbar.ts b/packages/opendesign/src/components/scrollbar/scrollbar.ts
deleted file mode 100644
index 7d0993fe253dde108e82b5c028b4cd63f4acd85c..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/scrollbar.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { defineComponent, cloneVNode, withDirectives } from 'vue';
-import { useReiszeObserverDirective } from '../hooks';
-
-/**
- * 子元素resize监听
- * 如果有多个子元素，每个子元素都会被监听到
- */
-export default defineComponent({
-  name: 'OResizeObserver',
-  emits: ['resize'],
-  setup(props, { emit, slots }) {
-    const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => {
-      // 触发resize事件
-      emit('resize', entry, isFirst);
-    });
-
-    return () => {
-      const children = slots.default?.();
-      return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]]));
-    };
-  },
-});
diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss
deleted file mode 100644
index bce181a7e1bc7db28c5418100a87d16fd0cea708..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/style/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@use './var.scss';
-
-.o-scrollbar {
-}
diff --git a/packages/opendesign/src/components/scrollbar/style/var.scss b/packages/opendesign/src/components/scrollbar/style/var.scss
deleted file mode 100644
index 8b9ec5be345abef50894b1206d47e2c6409eabed..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/scrollbar/style/var.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.o-scrollbar {
-}
diff --git a/packages/opendesign/src/components/scroller/OScrollbar.vue b/packages/opendesign/src/components/scroller/OScrollbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0116c822c281a77b4dfd311c1b0db79064cf17a
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/OScrollbar.vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { scrollbarProps } from './types';
+import { vOnResize } from '../directves/on-resize';
+
+const props = defineProps(scrollbarProps);
+const emits = defineEmits<{
+  (e: 'scroll', ratio: number): void;
+}>();
+
+const isY = computed(() => props.direction === 'y');
+// 是否正在拖拽bar
+const isDarggingBar = ref(false);
+
+const barRef = ref<HTMLElement | null>(null);
+const thumbRef = ref<HTMLElement | null>(null);
+
+const trackLength = ref(0);
+
+const thumbSize = computed(() => {
+  if (trackLength.value && props.thumbRate) {
+    return Math.round(trackLength.value * props.thumbRate);
+  }
+  return 0;
+});
+const thumbSizeStyle = computed(() => {
+  return `${thumbSize.value}px`;
+});
+
+const maxOffset = computed(() => trackLength.value - thumbSize.value);
+
+const sizeProp = computed(() => {
+  return isY.value ? 'height' : 'width';
+});
+const offsetProp = computed(() => {
+  return isY.value ? 'translateY' : 'translateX';
+});
+
+const offset = ref(0);
+watch(
+  () => props.offsetRate,
+  (v) => {
+    if (!isDarggingBar.value) {
+      offset.value = Math.round(trackLength.value * v);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+const offsetStyle = computed(() => {
+  return `${offsetProp.value}(${offset.value}px)`;
+});
+
+const adjustOffset = (pos: number) => {
+  if (pos < 0) {
+    return 0;
+  }
+  if (pos > maxOffset.value) {
+    return maxOffset.value;
+  }
+  return pos;
+};
+
+onMounted(() => {
+  if (!barRef.value) {
+    return;
+  }
+  const { offsetHeight, offsetWidth } = barRef.value;
+  trackLength.value = props.direction === 'x' ? offsetWidth : offsetHeight;
+});
+
+let s = 0;
+let oldOffset = 0;
+const onMouseMove = (e: MouseEvent) => {
+  const pos = isY.value ? e.clientY : e.clientX;
+  const v = oldOffset + pos - s;
+
+  const of = adjustOffset(v);
+  if (of !== offset.value) {
+    offset.value = of;
+    emits('scroll', offset.value / trackLength.value);
+  }
+};
+
+const onMouseUp = () => {
+  isDarggingBar.value = false;
+  window.removeEventListener('mousemove', onMouseMove);
+  window.removeEventListener('mouseup', onMouseUp);
+  window.removeEventListener('contextmenu', onMouseUp);
+};
+const onThumbMouseDown = (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+  isDarggingBar.value = true;
+  s = isY.value ? e.clientY : e.clientX;
+  oldOffset = offset.value;
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+  window.addEventListener('contextmenu', onMouseUp);
+};
+
+const onTrackClick = (e: MouseEvent) => {
+  e.preventDefault();
+  if (!thumbRef.value || !barRef.value) {
+    return;
+  }
+  const pos = isY.value ? e.clientY : e.clientX;
+  let v = 0;
+  if (props.notStepJump) {
+    const bc = barRef.value.getBoundingClientRect();
+    v = pos - (isY.value ? bc.top : bc.left) - thumbSize.value / 2;
+  } else {
+    const bc = thumbRef.value.getBoundingClientRect();
+    const isPlus = pos > (isY.value ? bc.top : bc.left);
+
+    v = offset.value + thumbSize.value * (isPlus ? 1 : -1);
+  }
+
+  const of = adjustOffset(v);
+  if (of !== offset.value) {
+    offset.value = of;
+    emits('scroll', offset.value / trackLength.value);
+  }
+};
+
+const onResize = () => {
+  if (!barRef.value) {
+    return;
+  }
+  const { offsetHeight, offsetWidth } = barRef.value;
+  trackLength.value = props.direction === 'x' ? offsetWidth : offsetHeight;
+};
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    v-on-resize="onResize"
+    class="o-scrollbar"
+    :class="[
+      `o-scrollbar-${props.direction}`,
+      `o-scrollbar-${props.size}`,
+      {
+        'o-scrollbar-dragging': isDarggingBar,
+      },
+    ]"
+    @click="onTrackClick"
+  >
+    <div
+      ref="thumbRef"
+      class="o-scrollbar-thumb"
+      :class="[
+        `o-scrollbar-${props.direction}-thumb`,
+        {
+          [`o-scrollbar-${props.direction}-thumb-dragging`]: isDarggingBar,
+        },
+      ]"
+      :style="{
+        [sizeProp]: thumbSizeStyle,
+        transform: offsetStyle,
+      }"
+      @click.stop
+      @mousedown="onThumbMouseDown"
+    >
+      <slot name="thumb" :direction="props.direction" :dragging="isDarggingBar">
+        <div
+          :class="[
+            `o-scrollbar-${props.direction}-thumb-bar`,
+            {
+              'is-dragging': isDarggingBar,
+            },
+          ]"
+        ></div>
+      </slot>
+    </div>
+    <slot :direction="props.direction">
+      <div class="o-scrollbar-track" :class="[`o-scrollbar-${props.direction}-track`]"></div>
+    </slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/scroller/OScroller.vue b/packages/opendesign/src/components/scroller/OScroller.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92da801f5a24c413e8ce6c77e1cbcd07ecb20431
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/OScroller.vue
@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { onMounted, ref, computed, onUnmounted, toRefs } from 'vue';
+import OScrollbar from './OScrollbar.vue';
+import { scrollerProps, ScrollerDirection } from './types';
+import { useResizeObserver } from '../hooks';
+import { getHtmlElement } from '../_shared/vue-utils';
+
+const ScrollerClass = {
+  BODY: 'o-scroller-root',
+};
+const props = defineProps(scrollerProps);
+
+const containerEl = ref<HTMLElement | null>(null);
+const hasY = ref(false);
+const hasX = ref(false);
+const hThumbRate = ref(0);
+const vThumbRate = ref(0);
+const hOffsetRate = ref(0);
+const vOffsetRate = ref(0);
+let wrapperEl: HTMLElement | null = null;
+let ro: ReturnType<typeof useResizeObserver> | null = null;
+const isBody = ref(false);
+
+const showXBar = ref(false);
+const showYBar = ref(false);
+let lastTop = -1;
+let lastLeft = -1;
+let xTimer: number | null = null;
+let yTimer: number | null = null;
+
+const onScroll = () => {
+  if (!wrapperEl) {
+    return;
+  }
+
+  const { scrollLeft, scrollWidth, scrollTop, scrollHeight } = wrapperEl;
+
+  hOffsetRate.value = scrollLeft / scrollWidth;
+  vOffsetRate.value = scrollTop / scrollHeight;
+
+  if (lastLeft >= 0) {
+    showXBar.value = scrollLeft !== lastLeft;
+    if (xTimer) {
+      clearTimeout(xTimer);
+    }
+    xTimer = window.setTimeout(() => {
+      showXBar.value = false;
+      xTimer = null;
+    }, props.duration);
+  }
+  lastLeft = scrollLeft;
+
+  if (lastTop >= 0) {
+    showYBar.value = scrollTop !== lastTop;
+    if (yTimer) {
+      clearTimeout(yTimer);
+      yTimer = null;
+    }
+    yTimer = window.setTimeout(() => {
+      showYBar.value = false;
+    }, props.duration);
+  }
+  lastTop = scrollTop;
+};
+
+const initVars = () => {
+  if (!wrapperEl) {
+    return;
+  }
+  const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollTop, scrollLeft } = wrapperEl;
+
+  hThumbRate.value = clientWidth / scrollWidth;
+  vThumbRate.value = clientHeight / scrollHeight;
+  hOffsetRate.value = scrollLeft / scrollWidth;
+  vOffsetRate.value = scrollTop / scrollHeight;
+
+  hasX.value = clientWidth < scrollWidth;
+  hasY.value = clientHeight < scrollHeight;
+};
+const init = () => {
+  if (!wrapperEl) {
+    return;
+  }
+
+  initVars();
+
+  ro?.observe(wrapperEl, initVars);
+  const listenEl = isBody.value ? window : wrapperEl;
+  listenEl.addEventListener('scroll', onScroll, { passive: true });
+};
+
+onMounted(() => {
+  ro = useResizeObserver();
+
+  if (containerEl.value) {
+    wrapperEl = containerEl.value;
+    init();
+  } else {
+    const { target } = toRefs(props);
+    getHtmlElement(target).then((el) => {
+      if (el === document.body) {
+        isBody.value = true;
+        wrapperEl = document.documentElement;
+        document.body.classList.add(ScrollerClass.BODY);
+      } else if (el) {
+        wrapperEl = el;
+      }
+
+      init();
+    });
+  }
+});
+onUnmounted(() => {
+  if (wrapperEl) {
+    ro?.unobserve(wrapperEl, initVars);
+
+    const listenEl = isBody.value ? window : wrapperEl;
+    listenEl.removeEventListener('scroll', onScroll);
+  }
+});
+
+const onHBarScroll = (ratio: number) => {
+  if (wrapperEl) {
+    const d = ratio * wrapperEl.scrollWidth;
+    wrapperEl.scrollTo({
+      left: d,
+    });
+  }
+};
+
+const onVBarScroll = (ratio: number) => {
+  if (wrapperEl) {
+    const d = ratio * wrapperEl.scrollHeight;
+    wrapperEl.scrollTo({
+      top: d,
+    });
+  }
+};
+
+const onBarHoverIn = (d: ScrollerDirection) => {
+  if (d === 'x') {
+    showXBar.value = true;
+    if (xTimer) {
+      clearTimeout(xTimer);
+      yTimer = null;
+    }
+  } else if (d === 'y') {
+    showYBar.value = true;
+    if (yTimer) {
+      clearTimeout(yTimer);
+      yTimer = null;
+    }
+  }
+};
+
+const onBarHoverOut = (d: ScrollerDirection) => {
+  if (d === 'x') {
+    xTimer = window.setTimeout(() => {
+      showXBar.value = false;
+    }, props.duration);
+  } else if (d === 'y') {
+    yTimer = window.setTimeout(() => {
+      showYBar.value = false;
+    }, props.duration);
+  }
+};
+
+const scrollerClass = computed(() => {
+  const classList: Array<string | Record<string, boolean>> = [`o-scroller-${props.size}`];
+  if (props.showType === 'auto') {
+    classList.push('o-scroller-auto-show', {
+      'o-scroller-show-x': showXBar.value,
+      'o-scroller-show-y': showYBar.value,
+    });
+  } else if (props.showType === 'hover') {
+    classList.push('o-scroller-hover-show');
+  }
+
+  if (hasX.value && hasY.value) {
+    classList.push('o-scroller-both');
+  }
+  if (isBody.value) {
+    classList.push('o-scroller-to-body');
+  }
+  return classList;
+});
+</script>
+
+<template>
+  <div class="o-scroller" :class="scrollerClass">
+    <div v-if="$slots.default" ref="containerEl" class="o-scroller-container">
+      <slot></slot>
+    </div>
+    <OScrollbar
+      v-if="hasX && !props.disabledX"
+      :size="props.size"
+      direction="x"
+      :thumb-rate="hThumbRate"
+      :offset-rate="hOffsetRate"
+      @scroll="onHBarScroll"
+      @mouseenter="onBarHoverIn('x')"
+      @mouseleave="onBarHoverOut('x')"
+    />
+    <OScrollbar
+      v-if="hasY && !props.disabledY"
+      direction="y"
+      :size="props.size"
+      :thumb-rate="vThumbRate"
+      :offset-rate="vOffsetRate"
+      @scroll="onVBarScroll"
+      @mouseenter="onBarHoverIn('y')"
+      @mouseleave="onBarHoverOut('y')"
+    />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b488e1e38b70af7b25556c1154420c1be39e47a
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OScroller } from '../index';
+import TheComp from './TheComp.vue';
+
+const containerRef = ref<HTMLElement | null>(null);
+const compRef = ref<HTMLElement | null>(null);
+
+const link = `${window.location.href}/body`;
+</script>
+<template>
+  <h4>Scroller basic</h4>
+  <section>
+    <div>
+      <h3>Native</h3>
+      <div class="container native">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </div>
+    </div>
+    <div>
+      <h3>Scroller showType="auto"</h3>
+      <OScroller class="container">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </OScroller>
+    </div>
+
+    <div>
+      <h3>Scroller showType="always"</h3>
+      <OScroller class="container" show-type="always">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </OScroller>
+    </div>
+
+    <div>
+      <h3>Scroller showType="hover"</h3>
+      <OScroller class="container" show-type="hover">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </OScroller>
+    </div>
+
+    <div>
+      <h3>Scroller size="small"</h3>
+      <OScroller class="container" show-type="always" size="small">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </OScroller>
+    </div>
+  </section>
+  <h4>Scroller target</h4>
+  <section>
+    <div>
+      <h3>Native</h3>
+      <div ref="containerRef" class="container native">
+        <div class="section">1</div>
+        <div class="section">2</div>
+        <div class="section">3</div>
+      </div>
+    </div>
+    <div>
+      <h3>映射窗口</h3>
+      <div class="out-container">
+        <OScroller class="out-scroller" show-type="always" size="small" :target="containerRef" />
+      </div>
+    </div>
+    <TheComp ref="compRef" />
+    <div>
+      <h3>映射窗口</h3>
+      <div class="out-container">
+        <OScroller class="out-scroller" show-type="always" size="small" :target="compRef" />
+      </div>
+    </div>
+  </section>
+  <h3>全局滚动条</h3>
+  <iframe :src="link" frameborder="0" width="100%" height="500px"></iframe>
+  <br />
+</template>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 300px;
+  border: 2px solid rgb(111, 45, 234);
+  box-sizing: border-box;
+}
+.native {
+  overflow: auto;
+}
+section > div {
+  flex: 0 1 33%;
+}
+.section {
+  height: 75%;
+  width: 150%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:nth-child(1) {
+    background-color: #a4dcc26e;
+  }
+  &:nth-child(2) {
+    background-color: #6288e66e;
+  }
+  &:nth-child(3) {
+    background-color: #f4f8726e;
+  }
+}
+.out-scroller {
+  height: 100%;
+}
+.out-container {
+  width: 300px;
+  height: 200px;
+  background-color: #efefef;
+}
+</style>
diff --git a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue
new file mode 100644
index 0000000000000000000000000000000000000000..afa04ef73e7cf41582425d6caa2a738263fd5732
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { OScroller } from '../index';
+import '../style';
+</script>
+<template>
+  <h4>Scroller body</h4>
+  <section class="sec">123123</section>
+  <OScroller target="body" show-type="always" />
+</template>
+<style lang="scss" scoped>
+.container {
+  width: 300px;
+  height: 300px;
+  border: 2px solid rgb(111, 45, 234);
+  box-sizing: border-box;
+}
+.native {
+  overflow: auto;
+}
+
+.sec {
+  height: 200vh;
+}
+</style>
diff --git a/packages/opendesign/src/components/scroller/__demo__/TheComp.vue b/packages/opendesign/src/components/scroller/__demo__/TheComp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d2a6dea6391e3e0116dd664551edb7dc355069f
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/__demo__/TheComp.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="wrap" style="height: 400px">
+    123123
+    <div class="inner" style="height: 800px"></div>
+  </div>
+</template>
+<style>
+.wrap {
+  background-color: #ccc;
+  overflow: auto;
+}
+.inner {
+  margin: 24px;
+  background-color: #999;
+}
+</style>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue b/packages/opendesign/src/components/scroller/__demo__/TheIndex.vue
similarity index 91%
rename from packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
rename to packages/opendesign/src/components/scroller/__demo__/TheIndex.vue
index 2ec5dc7c6bd25f7e64fd9a0630f89f0b72a1db88..e43aec63756c4b3f29f728c5e32ce81148c892df 100644
--- a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
+++ b/packages/opendesign/src/components/scroller/__demo__/TheIndex.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ScrollbarBasic from './ScrollbarBasic.vue';
+import '../style';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/opendesign/src/components/scroller/index.ts b/packages/opendesign/src/components/scroller/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25735d9824a376f2dcfafbc0645449489edb8e48
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _OScroller from './OScroller.vue';
+import OScrollbar from './OScrollbar.vue';
+
+const OScroller = Object.assign(_OScroller, {
+  OScrollbar,
+  install(app: App) {
+    app.component(_OScroller.name, _OScroller);
+  },
+});
+
+export { OScroller, OScrollbar };
diff --git a/packages/opendesign/src/components/scroller/style/index.scss b/packages/opendesign/src/components/scroller/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..278ea4f73ca911e02a4d4d9b95ac16ac346fce9e
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/style/index.scss
@@ -0,0 +1,187 @@
+@use './var.scss';
+/*
+ * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, 
+ * scrollbar-width 兼容firefox 64+
+ */
+
+.o-scroller {
+  position: relative;
+}
+
+.o-scroller-auto-show {
+  > .o-scrollbar {
+    opacity: 0;
+    pointer-events: none;
+  }
+  > .o-scrollbar-dragging {
+    opacity: 1;
+  }
+  &.o-scroller-show-x {
+    > .o-scrollbar-x {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &.o-scroller-show-y {
+    > .o-scrollbar-y {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.o-scroller-hover-show {
+  > .o-scrollbar {
+    opacity: 0;
+  }
+
+  > .o-scrollbar-dragging {
+    opacity: 1;
+  }
+  &:hover {
+    > .o-scrollbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.o-scroller-container {
+  overflow: auto;
+  scrollbar-width: none;
+  height: 100%;
+  width: 100%;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.o-scrollbar {
+  pointer-events: auto;
+
+  position: absolute;
+  background-color: var(--scrollbar-bg-color);
+  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
+
+  &:hover {
+    .o-scrollbar-x-thumb-bar {
+      height: var(--scrollbar-thumb-width-hover);
+      margin-top: calc(var(--scrollbar-thumb-width-hover) / -2);
+    }
+    .o-scrollbar-y-thumb-bar {
+      width: var(--scrollbar-thumb-width-hover);
+      margin-left: calc(var(--scrollbar-thumb-width-hover) / -2);
+    }
+    .o-scrollbar-track {
+      opacity: 1;
+    }
+  }
+}
+.o-scrollbar-y {
+  top: 50%;
+  height: var(--scrollbar-height);
+  transform: translateY(-50%);
+
+  width: var(--scrollbar-width);
+  left: var(--scrollbar-y-left);
+  right: var(--scrollbar-y-right);
+}
+
+.o-scrollbar-x {
+  left: 50%;
+  width: var(--scrollbar-height);
+  transform: translateX(-50%);
+
+  top: var(--scrollbar-x-top);
+  bottom: var(--scrollbar-x-bottom);
+  height: var(--scrollbar-width);
+}
+
+.o-scrollbar-dragging {
+  .o-scrollbar-track {
+    opacity: 1;
+  }
+}
+.o-scrollbar-track {
+  position: relative;
+  z-index: 0;
+  border-radius: var(--scrollbar-thumb-radius);
+  background-color: var(--scrollbar-track-bg-color);
+  opacity: 0;
+  transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
+}
+.o-scrollbar-y-track {
+  width: var(--scrollbar-track-width);
+  height: 100%;
+  left: 50%;
+  margin-left: calc(var(--scrollbar-track-width) / -2);
+}
+.o-scrollbar-x-track {
+  height: var(--scrollbar-track-width);
+  width: 100%;
+  top: 50%;
+  margin-top: calc(var(--scrollbar-track-width) / -2);
+}
+
+.o-scrollbar-thumb {
+  position: absolute;
+  z-index: 1;
+}
+.o-scrollbar-y-thumb {
+  top: 0;
+  left: 50%;
+}
+.o-scrollbar-x-thumb {
+  left: 0;
+  top: 50%;
+}
+
+.o-scrollbar-x-thumb-bar,
+.o-scrollbar-y-thumb-bar {
+  background-color: var(--scrollbar-thumb-bg-color);
+  border-radius: var(--scrollbar-thumb-radius);
+  transition: all var(--o-easing-standard-in) var(--o-duration-m1);
+
+  &:hover {
+    background-color: var(--scrollbar-thumb-bg-color-hover);
+  }
+}
+.o-scrollbar-x-thumb-bar {
+  width: 100%;
+  height: var(--scrollbar-thumb-width);
+  margin-top: calc(var(--scrollbar-thumb-width) / -2);
+
+  &.is-dragging {
+    height: var(--scrollbar-thumb-width-hover);
+    margin-top: calc(var(--scrollbar-thumb-width-hover) / -2);
+    background-color: var(--scrollbar-thumb-bg-color-hover);
+  }
+}
+.o-scrollbar-y-thumb-bar {
+  width: var(--scrollbar-thumb-width);
+  margin-left: calc(var(--scrollbar-thumb-width) / -2);
+  height: 100%;
+  &.is-dragging {
+    width: var(--scrollbar-thumb-width-hover);
+    margin-left: calc(var(--scrollbar-thumb-width-hover) / -2);
+    background-color: var(--scrollbar-thumb-bg-color-hover);
+  }
+}
+
+.o-scroller-to-body {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: var(--o-z-index-max);
+  pointer-events: none;
+}
+
+.o-scroller-root {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/packages/opendesign/src/components/scrollbar/style/index.ts b/packages/opendesign/src/components/scroller/style/index.ts
similarity index 100%
rename from packages/opendesign/src/components/scrollbar/style/index.ts
rename to packages/opendesign/src/components/scroller/style/index.ts
diff --git a/packages/opendesign/src/components/scroller/style/var.scss b/packages/opendesign/src/components/scroller/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ff4850afc14d86bafd8d4376030bf18079bb3b8
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/style/var.scss
@@ -0,0 +1,30 @@
+.o-scroller {
+  --scrollbar-height: 100%;
+  --scrollbar-y-right: 0;
+  --scrollbar-y-left: auto;
+  --scrollbar-x-top: auto;
+  --scrollbar-x-bottom: 0;
+  --scrollbar-bg-color: transparent;
+
+  --scrollbar-track-bg-color: var(--o-color-control1-light);
+  --scrollbar-track-width: 8px;
+  --scrollbar-thumb-radius: 4px;
+
+  --scrollbar-thumb-bg-color: var(--o-color-control2-light);
+  --scrollbar-thumb-bg-color-hover: var(--o-color-control3-light);
+  --scrollbar-thumb-width: 8px;
+  --scrollbar-thumb-width-hover: 12px;
+  --scrollbar-thumb-radius: 12px;
+  --scrollbar-width: 12px;
+}
+.o-scroller-both {
+  --scrollbar-height: calc(100% - var(--scrollbar-width) * 2);
+}
+.o-scroller-small {
+  --scrollbar-track-width: 4px;
+  --scrollbar-thumb-radius: 2px;
+  --scrollbar-thumb-width: 4px;
+  --scrollbar-thumb-width-hover: 8px;
+  --scrollbar-thumb-radius: 10px;
+  --scrollbar-width: 10px;
+}
diff --git a/packages/opendesign/src/components/scroller/types.ts b/packages/opendesign/src/components/scroller/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5bc847c2b52e17a0a4b8a4fbbaede8ca6f058a4
--- /dev/null
+++ b/packages/opendesign/src/components/scroller/types.ts
@@ -0,0 +1,87 @@
+import { ExtractPropTypes, PropType, ComponentPublicInstance } from 'vue';
+export type ScrollerDirection = 'x' | 'y';
+
+export const scrollerProps = {
+  /**
+   * 禁用横向滚动
+   */
+  disabledX: {
+    type: Boolean,
+  },
+  /**
+   * 禁用纵向滚动
+   */
+  disabledY: {
+    type: Boolean,
+  },
+  /**
+   * 滚动容器,支持body、元素ref、HTMLElement
+   */
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+  },
+  /**
+   * 滚动条在停止滚动多长时间后隐藏, ms
+   */
+  duration: {
+    type: Number,
+    default: 600,
+  },
+  /**
+   * 滚动条显示控制
+   * always：一直显示
+   * auto: 滚动中、滚动后hover滚动条、拖拽时显示
+   * hover: 滚动条hover时显示
+   */
+  showType: {
+    type: String as PropType<'auto' | 'always' | 'hover'>,
+    default: 'auto',
+  },
+  /**
+   * 滚动条尺寸大小
+   */
+  size: {
+    type: String as PropType<'medium' | 'small'>,
+    default: 'medium',
+  },
+};
+
+export type ScrollerPropsT = ExtractPropTypes<typeof scrollerProps>;
+
+export const scrollbarProps = {
+  /**
+   * 滚动条方向 h：横向 v: 纵向
+   */
+  direction: {
+    type: String as PropType<'x' | 'y'>,
+    default: 'y',
+  },
+  /**
+   * 滚动bar宽度占总宽度
+   */
+  thumbRate: {
+    type: Number,
+  },
+  /**
+   * 滚动bar滚动位置百分比
+   */
+  offsetRate: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 点击track一次，滚动一屏
+   */
+  notStepJump: {
+    type: Boolean,
+  },
+  /**
+   * 滚动条尺寸大小
+   */
+  size: {
+    type: String as PropType<'medium' | 'small'>,
+    default: 'medium',
+  },
+};
+export type ScrollbarPropsT = ExtractPropTypes<typeof scrollbarProps>;
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index c64c03a288eaa40f05ca1a865085405f11a0be4f..4b854f668137af9462ad0a603909fd991f390aeb 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -9,4 +9,5 @@
 
 :root {
   --o-z-index-base: 100;
+  --o-z-index-max: 9999;
 }
diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index 4f510869a2c2619207ace88dc3790cee349246ea..79dcb1bfadbde3e0a2d38894c151260de6677f0e 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -15,16 +15,17 @@ watch(
   }
 );
 
-const navList = routes.map((item) => {
-  const { path, name, label } = item;
-  return {
-    path,
-    name,
-    label,
-  };
-});
-
-const navClick = (item: typeof navList[0]) => {
+const navList = routes
+  .filter((item) => !item.exclude)
+  .map((item) => {
+    const { path, name, label } = item;
+    return {
+      path,
+      name,
+      label,
+    };
+  });
+const navClick = (item: (typeof navList)[0]) => {
   console.log(item.path);
   router.push(item.path);
 };
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 2d200bb215b62a3fe6c5f45279d7c907cfa8b141..168c26478529e3a80ad9f6fcfe8943e166a3abfc 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -218,6 +218,19 @@ export const routes = [
     label: '结果 Result',
     component: () => import('@components/result/__demo__/TheIndex.vue'),
   },
+  {
+    path: '/scroller',
+    name: 'Scroller',
+    label: '滚动条 Scroller',
+    component: () => import('@components/scroller/__demo__/TheIndex.vue'),
+  },
+  {
+    exclude: true,
+    path: '/scroller/body',
+    name: 'Scroller-body',
+    label: '全局滚动条 Scroller-body',
+    component: () => import('@components/scroller/__demo__/ScrollbarBody.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 989f22f392093b25c5cd1918767187241d791dbf..4fd95c0c22be56841ade251f2f8d67b581ec5932 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,23 +24,10 @@ importers:
         version: 4.9.3
 
   packages/opendesign:
-    dependencies:
-      intersection-observer-polyfill:
-        specifier: ^0.1.0
-        version: 0.1.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
-      resize-observer-polyfill:
-        specifier: ^1.5.1
-        version: 1.5.1
     devDependencies:
       '@opensig/opensig-scripts':
         specifier: workspace:^0.0.8
         version: link:../scripts
-      '@types/lodash-es':
-        specifier: ^4.17.6
-        version: 4.17.6
       typescript:
         specifier: ^4.6.4
         version: 4.9.3
@@ -54,7 +41,7 @@ importers:
   packages/portal:
     dependencies:
       '@opensig/opendesign':
-        specifier: workspace:^0.0.29
+        specifier: workspace:^0.0.37
         version: link:../opendesign
       '@opensig/opensig-scripts':
         specifier: workspace:^0.0.8
@@ -393,16 +380,6 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
-  /@types/lodash-es@4.17.6:
-    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
-    dependencies:
-      '@types/lodash': 4.14.191
-    dev: true
-
-  /@types/lodash@4.14.191:
-    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
-    dev: true
-
   /@types/minimatch@5.1.2:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
@@ -1335,10 +1312,6 @@ packages:
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  /intersection-observer-polyfill@0.1.0:
-    resolution: {integrity: sha512-kYxriUk7Dl8GPu2TuOFAbtG5+UK0LLrLzlUErF8R9w5iPWmrtfVZsjCYbGF0/SyRDo1VfHMOZYBB2svb2locbw==}
-    dev: false
-
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1428,10 +1401,6 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-    dev: false
-
   /lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
@@ -1645,10 +1614,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-    dev: false
-
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}