fix: 修复滚动聚焦问题

alibaba · Feb 28, 2023 · c50e6a6 · c50e6a6
1 parent 60936f7
commit c50e6a6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git a/packages/hooks/src/useInViewport/demo/demo3.tsx b/packages/hooks/src/useInViewport/demo/demo3.tsx
@@ -3,10 +3,10 @@
  * desc: Pass in 'callback', you can customize the control to trigger the event when the visible area reaches this proportion. In this example, scroll to the element area and select the corresponding menu.
  *
  * title.zh-CN: 监听内容滚动选中菜单
- * desc.zh-CN: 传入 `callback`, 可以自定义控制在可见区域达到该比例时触发事件，在这个例子中，滚动到元素区域中选中对应菜单。
+ * desc.zh-CN: 传入 `callback`, 可以自定义控制在可视区域达到该比例时触发事件，在这个例子中，滚动到元素区域中选中对应菜单。
  */
-import React, { useRef, useState } from 'react';
 import { useInViewport } from 'ahooks';
+import React, { useRef, useState } from 'react';
 
 const menus = ['menu-1', 'menu-2', 'menu-3'];
 const content = {
@@ -20,11 +20,13 @@ export default () => {
 
   const [activeMenu, setActiveMenu] = useState(menus[0]);
 
-  useInViewport(menuRef.current, { threshold: 0.1 }, (entry) => {
-    if (entry.isIntersecting) {
-      const active = entry.target.getAttribute('id') || '';
-      setActiveMenu(active);
-    }
+  useInViewport(menuRef.current, {
+    callback: (entry) => {
+      if (entry.isIntersecting) {
+        const active = entry.target.getAttribute('id') || '';
+        setActiveMenu(active);
+      }
+    },
   });
 
   const handleMenuClick = (menu) => {

diff --git a/packages/hooks/src/useInViewport/index.en-US.md b/packages/hooks/src/useInViewport/index.en-US.md
@@ -27,7 +27,6 @@ Observe whether the element is in the visible area, and the visible area ratio o
 const [inViewport, ratio] = useInViewport(
   target,
   options?: Options
-  callback?: (entry: IntersectionObserverEntry) => void
 );
 ```
 
@@ -37,7 +36,6 @@ const [inViewport, ratio] = useInViewport(
 | -------- | ------------------ | ----------------------------------------------------------- | ------- |
 | target   | DOM element or ref | `Element` \| `() => Element` \| `MutableRefObject<Element>` | -       |
 | options  | Setting            | `Options`                                                   | -       |
-| callback | Callback           | `(entry: IntersectionObserverEntry) => void`                | -       |
 
 ### Options
 
@@ -48,6 +46,7 @@ More information refer to [Intersection Observer API](https://developer.mozilla.
 | threshold  | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the ratio should be executed                                           | `number` \| `number[]`                                                               | -       |
 | rootMargin | Margin around the root                                                                                                                                                            | `string`                                                                             | -       |
 | root       | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. | `Element` \| `Document` \| `() => (Element/Document)` \| `MutableRefObject<Element>` | -       |
+| callback   | You can customize the control to trigger the event when the visual area reaches this ratio                                                                                        | `(entry: IntersectionObserverEntry) => void`                                         | -       |
 
 ### Result
 

diff --git a/packages/hooks/src/useInViewport/index.ts b/packages/hooks/src/useInViewport/index.ts
@@ -4,19 +4,16 @@ import type { BasicTarget } from '../utils/domTarget';
 import { getTargetElement } from '../utils/domTarget';
 import useEffectWithTarget from '../utils/useEffectWithTarget';
 
+type CallbackType = (entry: IntersectionObserverEntry) => void;
+
 export interface Options {
   rootMargin?: string;
   threshold?: number | number[];
   root?: BasicTarget<Element>;
+  callback?: CallbackType;
 }
 
-type CallbackType = (entry: IntersectionObserverEntry) => void;
-
-function useInViewport(
-  target: BasicTarget | BasicTarget[],
-  options?: Options,
-  callback?: CallbackType,
-) {
+function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) {
   const [state, setState] = useState<boolean>();
   const [ratio, setRatio] = useState<number>();
 
@@ -30,6 +27,8 @@ function useInViewport(
         return;
       }
 
+      const { callback, ...option } = options || {};
+
       const observer = new IntersectionObserver(
         (entries) => {
           for (const entry of entries) {
@@ -41,8 +40,8 @@ function useInViewport(
           }
         },
         {
-          ...options,
-          root: getTargetElement(options?.root),
+          ...option,
+          root: getTargetElement(option?.root),
         },
       );
 

diff --git a/packages/hooks/src/useInViewport/index.zh-CN.md b/packages/hooks/src/useInViewport/index.zh-CN.md
@@ -27,17 +27,15 @@ nav:
 const [inViewport, ratio] = useInViewport(
   target,
   options?: Options
-  callback?: (entry: IntersectionObserverEntry) => void
 );
 ```
 
 ### Params
 
-| 参数     | 说明             | 类型                                                        | 默认值 |
-| -------- | ---------------- | ----------------------------------------------------------- | ------ |
-| target   | DOM 节点或者 ref | `Element` \| `() => Element` \| `MutableRefObject<Element>` | -      |
-| options  | 设置             | `Options`                                                   | -      |
-| callback | 回调             | `(entry: IntersectionObserverEntry) => void`                | -      |
+| 参数    | 说明             | 类型                                                        | 默认值 |
+| ------- | ---------------- | ----------------------------------------------------------- | ------ |
+| target  | DOM 节点或者 ref | `Element` \| `() => Element` \| `MutableRefObject<Element>` | -      |
+| options | 设置             | `Options`                                                   | -      |
 
 ### Options
 
@@ -48,6 +46,7 @@ const [inViewport, ratio] = useInViewport(
 | threshold  | 可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 ratio 会被更新        | `number` \| `number[]`                                                               | -      |
 | rootMargin | 根(root)元素的外边距                                                                                          | `string`                                                                             | -      |
 | root       | 指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素，如果未指定或者为 null，则默认为浏览器视窗。 | `Element` \| `Document` \| `() => (Element/Document)` \| `MutableRefObject<Element>` | -      |
+| callback   | 可以自定义控制在可见区域达到该比例时触发事件                                                                  | `(entry: IntersectionObserverEntry) => void`                                         | -      |
 
 ### Result