update README.md

Author: SSSensational

README-zh_CN.md

@@ -1,7 +1,7 @@
 custom-vue-scrollbar(Vue3)
 =========================
 
- [custom-react-scrollbar(react版)](https://github.com/custom-lib/custom-react-scrollbar)
+ [custom-react-scrollbar (react版)](https://github.com/custom-lib/custom-react-scrollbar)
 
 中文 | [English](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/READM.md)
 
@@ -20,6 +20,7 @@ custom-vue-scrollbar(Vue3)
 * typescript支持
 
 ## 引入
+
 ```bash
 npm install --save custom-vue-scrollbar
 ```
@@ -44,7 +45,9 @@ declare module 'vue' {
 ```javascript
 <template>
     <custom-scrollbar :style="{ width: '500px', height: '300px' }">
-        <p>Some great content...</p>
+        <div :style="{ width: '1000px', height: '600px' }">
+            Some great content...
+        </div>
     </custom-scrollbar>
 </template>
 ```
@@ -93,6 +96,7 @@ ResizeObserver监听 包裹/内容 容器的尺寸变化来更新滚动条的尺
 使用wheel模拟滚动代替原生滚动。在需要与外部浮动的元素同步滚动进度时开启，可以消除原生滚动在同步时 不在同一轮事件循环里 带来的抖动。
 
 ### Emit
+
 ```javascript
 interface Rect {
     left: number;
@@ -150,4 +154,5 @@ MIT
 
 
 ## custom-lib相关QQ群
+
 ![image](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/website/assets/qrCode.jpg)

README.md

@@ -1,7 +1,7 @@
 custom-vue-scrollbar(Vue3)
 =========================
 
-[react version here.](https://github.com/custom-lib/custom-react-scrollbar)
+[custom-react-scrollbar (react version here)](https://github.com/custom-lib/custom-react-scrollbar)
 
 English | [中文](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/README-zh_CN.md)
 
@@ -16,10 +16,11 @@ It's dependencies of custom-vue-table.
 * Floating scroll bar (when the scroll container exceeds the visible area of ​​the screen, the scroll bar is fixed at the bottom of the screen).
 * High performance.Optional debounce/throttle to observe size changes.。
 * Support native scroll mode (default) and simulate scroll mode (useful in scenes such as: scroll synchronously with outer float elements).
-* it's lightweight.16.5kb uncompressed, 4.5kb after compression (gzip).
+* it's lightweight. 16.5kb uncompressed, 4.5kb after compression (gzip).
 * typescript support.
 
 ## Install
+
 ```bash
 npm install --save custom-vue-scrollbar
 ```
@@ -44,7 +45,9 @@ Just give it a fixed size like using a native scroll container.
 ```javascript
 <template>
     <custom-scrollbar :style="{ width: '500px', height: '300px' }">
-        <p>Some content...</p>
+        <div :style="{ width: '1000px', height: '600px' }">
+            Some great content...
+        </div>
     </custom-scrollbar>
 </template>
 ```
@@ -82,7 +85,7 @@ When the scrolling is triggered, the scrollbar will be hidden only after the del
 Scroll bar default is 8px wide, the actual external has a 12px placeholder container, click, drag and drop logic is hanging on this placeholder container (convenient to click, 8px visually comfortable but difficult). When this option is turned on, the occupancy container hover, the scrollbar width will change to the width of the occupancy container.
 
 **fixedThumb** _`:boolean`_ = false
-The 'direction' property specifies the direction as the 'major axis direction'. When the 'fixedThumb' property is turned on, if the secondary axis has a scrollbar and the major axis has a scroll container that is partially off-screen. The scrollbars of the secondary axis will float to the edge of the screen.
+The 'direction' property specifies the direction as the 'major axis direction'. When the 'fixedThumb' property is turned on, if the secondary axis has a scrollbar and the major axis has a scroll container that is partially off-screen. The scrollbar of the secondary axis will float to the edge of the screen.
 
 **throttleType** _`:'throttle' | 'debounce' | 'none'`_ = 'debounce'
 ResizeObserver listens for changes in the size of the container/content DOM Node to update the size of the scrollbar. Most scenarios do not require a high refresh rate and using 'debounce' is sufficient in most scenarios.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "custom-vue-scrollbar",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "license": "MIT",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -20,13 +20,13 @@
     "devDependencies": {
         "@types/lodash-es": "^4.17.5",
         "@types/stats.js": "^0.17.0",
-        "@vitejs/plugin-vue": "^1.9.2",
+        "@vitejs/plugin-vue": "^1.9.3",
         "@vue/compiler-sfc": "^3.2.19",
         "rollup-plugin-visualizer": "^5.5.2",
         "sass": "^1.42.1",
         "stats.js": "^0.17.0",
         "typescript": "^4.4.3",
-        "vite": "^2.6.2",
+        "vite": "^2.6.3",
         "vue-i18n": "^9.2.0-beta.11"
     },
     "dependencies": {

src/useMeasure.ts

@@ -1,6 +1,6 @@
 import { debounce, throttle } from 'lodash-es';
-import { onUnmounted, reactive, shallowRef, watchEffect } from 'vue';
 import type { Ref } from 'vue';
+import { onUnmounted, reactive, shallowRef, watchEffect } from 'vue';
 
 export interface Rect {
     left: number;
@@ -35,8 +35,23 @@ export default function useMeasure<T extends Element | SVGSVGElement = any>(...a
     const targetRef = hasParamRef ? args[0] : shallowRef<T>(null!)
     const rect = reactive<Rect>({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0 });
 
+    const observerFunc = () => {
+        const domRect = targetRef.value.getBoundingClientRect();
+        rect.left = domRect.left;
+        rect.top = domRect.top;
+        rect.right = domRect.right;
+        rect.bottom = domRect.bottom;
+        rect.width = domRect.width;
+        rect.height = domRect.height;
+        rect.x = domRect.x;
+        rect.y = domRect.y;
+        callback?.();
+    };
+    let execFunc: (() => void) | null = null;
+
     let ro: ResizeObserver | null = null;
     const clearRo = () => {
+        if (execFunc) window.removeEventListener('resize', execFunc);
         if (!ro) return;
         ro.disconnect();
         ro = null;
@@ -45,20 +60,8 @@ export default function useMeasure<T extends Element | SVGSVGElement = any>(...a
     watchEffect(() => {
         if (!targetRef.value) return;
         clearRo();
-        const observerFunc = () => {
-            const domRect = targetRef.value.getBoundingClientRect();
-            rect.left = domRect.left;
-            rect.top = domRect.top;
-            rect.right = domRect.right;
-            rect.bottom = domRect.bottom;
-            rect.width = domRect.width;
-            rect.height = domRect.height;
-            rect.x = domRect.x;
-            rect.y = domRect.y;
-            callback?.();
-        };
 
-        let execFunc = observerFunc;
+        execFunc = observerFunc;
         if (type === 'throttle' && wait >= 4) execFunc = throttle(execFunc, wait);
         else if (type === 'debounce' && wait >= 4) execFunc = debounce(execFunc, wait);
         window.addEventListener('resize', execFunc);

website/Box.vue

@@ -11,8 +11,8 @@
         <div class="box_desc">
             {{ desc }}
         </div>
-        <div class="box_opertion">
-            <slot name="opertion"></slot>
+        <div class="box_operation">
+            <slot name="operation"></slot>
         </div>
         <div class="box_content">
             <slot></slot>
@@ -102,7 +102,7 @@ defineProps<Props>();
     opacity: .7;
 }
 
-.box_opertion {
+.box_operation {
     font-size: 18px;
     font-weight: 600;
     color: #31456A;

website/examples/AutoHeight.vue

@@ -4,7 +4,7 @@
         :desc="$t('desc')"
         codeSrc="https://github.com/custom-lib/custom-vue-scrollbar/blob/main/website/examples/AutoHeight.vue"
     >
-        <template #opertion>
+        <template #operation>
             <div class="operation">
                 <div class="operation_btn" @click="paragraphCount += 1">
                     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M942.6 383.8H640.1V81.3c0-44-36-80-80-80h-96.2c-44 0-80 36-80 80v302.5H81.4c-44 0-80 36-80 80V560c0 44 36 80 80 80h302.5v302.5c0 44 36 80 80 80h96.2c44 0 80-36 80-80V640.1h302.5c44 0 80-36 80-80v-96.2c0-44.1-36-80.1-80-80.1z" fill="#31456A"></path></svg>
@@ -16,7 +16,7 @@
         </template>
         <template #default>
             <custom-scrollbar :style="{ maxHeight: '40vh' }" :autoHide="false" throttleType="none">
-                <div v-for="(_, index) in paragraphCount" :style="{ height: '8vh', lineHeight: '8vh' }">
+                <div v-for="(_, index) in paragraphCount" :style="{ height: '8vh', lineHeight: '8vh' }" :key="index">
                     {{ index }}:
                     {{ 
                         paragraphCount < 6 ? `Add ${6 - paragraphCount} more paragraph to show scroller.`

website/examples/FixedThumb.vue

@@ -23,11 +23,11 @@ export default defineComponent({
                 desc: `
                     The 'direction' property specifies the direction as the 'major axis direction'.
                     When the 'fixedThumb' property is turned on, if the secondary axis has a scrollbar and the major axis has a scroll container that is partially off-screen.
-                    The scrollbars of the secondary axis will float to the edge of the screen.
+                    The scrollbar of the secondary axis will float to the edge of the screen.
                 `
             },
             zh: {
-                title: '基础用法',
+                title: '浮动滚动条',
                 desc: `'direction' 属性 指定的方向为 '主轴方向'。开启 'fixedThumb' 属性 后，如果辅轴有滚动条，并且主轴方向有部分滚动容器位于屏幕外。辅轴的滚动条将会浮动至屏幕边缘。`
             },
         },

website/examples/ThumbSize.vue

@@ -4,7 +4,7 @@
         :desc="$t('desc')"
         codeSrc="https://github.com/custom-lib/custom-vue-scrollbar/blob/main/website/examples/ThumbSize.vue"
     >
-        <template #opertion>
+        <template #operation>
             <div class="operation">
                 <span :style="{ marginRight: '8px' }">thumbMinSize:</span> <input class="operation_input" type="number" v-model="thumbMinSize" />(px)
             </div>
@@ -47,13 +47,6 @@ let thumbMinSize = $ref(160);
 </script>
 
 <style lang="scss">
-.operation {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 16px;
-}
-
 .operation_input {
     all: unset;
     margin-right: 20px;

website/main.ts

@@ -35,4 +35,4 @@ function animate() {
 	requestAnimationFrame( animate );
 }
 
-requestAnimationFrame( animate );
+requestAnimationFrame( animate );