feat: 锚点导航调整为sticky布局

examples/doc.css

@@ -19,6 +19,7 @@
   position: relative;
   width: 100%;
   margin: 20px 0;
+  --affix-offset-top: 70px;
 }
 
 .doc-play-ground > .visibility-sensor {

packages/amis-ui/scss/components/_anchor-nav.scss

@@ -1,6 +1,6 @@
 .#{$ns}AnchorNav {
   display: flex;
-  height: px2rem(400px);
+  height: 100%;
 
   &--vertical {
     .#{$ns}AnchorNav-link-wrap {
@@ -8,11 +8,17 @@
       padding: 0;
       width: var(--Tabs--vertical-width);
       border-left: var(--AnchorNav-links-container-borderRight);
-      padding-bottom: px2rem(60px);
+      padding-bottom: px2rem(20px);
+      position: sticky;
+      top: var(--affix-offset-top);
+      height: fit-content;
+      max-height: 100%;
+      overflow-y: scroll;
 
       > .#{$ns}AnchorNav-link {
         position: relative;
         display: block;
+
         &.#{$ns}AnchorNav-link-child {
           margin-left: px2rem(16px);
         }
@@ -71,6 +77,10 @@
       padding: 0px;
       border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
       list-style: none;
+      position: sticky;
+      top: var(--affix-offset-top);
+      z-index: 1;
+      background-color: var(--background);
 
       > .#{$ns}AnchorNav-link {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
@@ -123,6 +133,12 @@
         }
       }
     }
+
+    .#{$ns}AnchorNav-section-wrap {
+      > .#{$ns}AnchorNav-section {
+        scroll-margin: calc(var(--affix-offset-top) + 50px);
+      }
+    }
   }
 
   &-section-wrap {
@@ -136,6 +152,7 @@
     > .#{$ns}AnchorNav-section {
       display: block;
       padding: var(--gap-base);
+      scroll-margin: var(--affix-offset-top);
     }
   }
 }

packages/amis-ui/src/components/AnchorNav.tsx

@@ -10,7 +10,7 @@ import {ThemeProps, themeable} from 'amis-core';
 import {autobind} from 'amis-core';
 import {uncontrollable} from 'amis-core';
 import find from 'lodash/find';
-import type {PlainObject, Schema} from 'amis-core';
+import type {Schema} from 'amis-core';
 
 export interface AnchorNavSectionProps extends ThemeProps {
   title?: string; // 标题
@@ -26,10 +26,14 @@ class AnchorNavSectionComponent extends React.PureComponent<AnchorNavSectionProp
   contentRef = (ref: any) => (this.contentDom = ref);
 
   render() {
-    const {classnames: cx, children, className} = this.props;
+    const {classnames: cx, children, className, name} = this.props;
 
     return (
-      <div ref={this.contentRef} className={cx('AnchorNav-section', className)}>
+      <div
+        ref={this.contentRef}
+        className={cx('AnchorNav-section', className)}
+        id={name + ''}
+      >
         {children}
       </div>
     );
@@ -52,17 +56,7 @@ export interface AnchorNavProps extends ThemeProps {
   children?: React.ReactNode | Array<React.ReactNode>;
 }
 
-interface SectionOffset {
-  key: string | number;
-  offsetTop: number;
-}
-
-export interface AnchorNavState {
-  offsetArr: SectionOffset[]; // 记录每个段落的offsetTop
-  fromSelect: boolean; // 标识滚动触发来源
-}
-
-export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
+export class AnchorNav extends React.Component<AnchorNavProps> {
   static defaultProps: Pick<
     AnchorNavProps,
     'linkClassName' | 'sectionClassName' | 'direction'
@@ -76,97 +70,63 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
   contentDom: React.RefObject<HTMLDivElement> = React.createRef();
 
   // 后代节点观察器
-  observer: MutationObserver;
+  observer: IntersectionObserver;
 
   sections: {
     key: string | number;
     element: HTMLDivElement;
+    isIntersecting?: boolean;
   }[] = [];
 
-  componentDidMount() {
-    // 初始化滚动标识
-    this.setState({fromSelect: false});
+  fromSelect: boolean = false;
+  fromSelectTimer: any;
 
-    const sectionRootDom =
-      this.contentDom && (this.contentDom.current as HTMLElement);
-    sectionRootDom.addEventListener('scroll', this.scrollToNav);
+  componentDidMount() {
+    this.observer = new IntersectionObserver(this.scrollToNav);
+    this.sections.forEach(item => {
+      this.observer.observe(item.element);
+    });
   }
 
   componentWillUnmount() {
-    if (this.contentDom && this.contentDom.current) {
-      this.contentDom.current.removeEventListener('scroll', this.scrollToNav);
-    }
+    this.observer.disconnect();
   }
 
   @autobind
-  scrollToNav(e: Event) {
-    if (this.state.fromSelect) {
-      return;
-    }
-
-    // 获取滚动的scrollTop
-    const {scrollTop, scrollHeight, clientHeight} = e.target as HTMLElement;
-
-    // 是否到达最底部，以防最后一个因为高度不够无法高亮
-    const isReachBottom = scrollTop + clientHeight >= scrollHeight;
-
-    // 判断scrollTop所在区域
-    const firstSection = this.sections[0];
-    const lastSection = this.sections[this.sections.length - 1];
-    // 首层偏移
-    const offset = scrollTop + firstSection.element.offsetTop;
-
-    // 首层
-    if (offset <= firstSection.element.offsetTop) {
-      this.fireSelect(firstSection.key);
-    }
-    // 最后一层
-    else if (isReachBottom || offset >= lastSection.element.offsetTop) {
-      this.fireSelect(lastSection.key);
+  scrollToNav(entries: IntersectionObserverEntry[]) {
+    entries.forEach(entry => {
+      const key = entry.target.id;
+      const currentSection = this.sections.find(item => item.key === key);
+      if (currentSection) {
+        currentSection.isIntersecting = entry.isIntersecting;
+      }
+    });
+    // 找到第一个可见的区域
+    const firstIntersectingSection = this.sections.find(
+      item => item.isIntersecting
+    );
+    if (!this.fromSelect) {
+      firstIntersectingSection && this.fireSelect(firstIntersectingSection.key);
     } else {
-      // 段落区间判断
-      this.sections.forEach((item, index) => {
-        if (
-          offset >= item.element.offsetTop &&
-          offset < this.sections[index + 1].element.offsetTop
-        ) {
-          this.fireSelect(item.key);
-        }
-      });
+      // 滚动结束后，重置fromSelect状态
+      if (this.fromSelectTimer) {
+        clearTimeout(this.fromSelectTimer);
+      }
+      this.fromSelectTimer = setTimeout(() => {
+        this.fromSelect = false;
+      }, 300);
     }
   }
 
   scrollToSection(key: string | number) {
-    // 获取指定段落的offsettop
-    const node = find(this.sections, item => item.key === key);
-    const sectionRootDom =
-      this.contentDom && (this.contentDom.current as HTMLElement);
-
-    // 滚动到指定段落
-    node &&
-      (sectionRootDom.scrollTop =
-        node.element.offsetTop - this.sections[0].element.offsetTop);
+    this.fromSelect = true;
+    const node = find(this.sections, item => item.key === key)?.element;
+    node?.scrollIntoView({behavior: 'smooth'});
   }
 
   handleSelect(key: string | number) {
-    // 标记滚动来自导航选择
-    this.setState({fromSelect: true});
-    // 滚动到对应段落
     this.scrollToSection(key);
-    const sectionRootDom =
-      this.contentDom && (this.contentDom.current as HTMLElement);
-
-    // 如果已经滚到底就不去更新导航选中了
-    if (
-      sectionRootDom.scrollHeight - sectionRootDom.scrollTop <
-      sectionRootDom.clientHeight
-    ) {
-      // fire event
-      this.fireSelect(key);
-    }
-
-    // 取消标记
-    this.setState({fromSelect: false});
+    this.fireSelect(key);
   }
 
   fireSelect(key: string | number) {
@@ -215,7 +175,7 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
       classnames,
       active,
       ref: (props: any) => {
-        if (props && !this.sections.find(item => item.key === key)) {
+        if (props && !this.sections.find(item => item.key === name)) {
           // 收集每个段落的真实dom节点
           this.sections.push({key: name, element: props.ref.contentDom});
         }