ant design中锚点Anchor在二级页面中设置滚动偏移量

 版本：
  react: 18.2.0
  antd：5.1.1

 

AnchorPage,tsx

import React, { useEffect, useState } from 'react';
import { Anchor, Row, Col } from 'antd';

const AnchorPage = () => {
  const topRef = React.useRef<HTMLDivElement>(null);
  const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);

  useEffect(() => {
    setTargetOffset(topRef.current?.clientHeight);
  }, []);
  
  // 指定挂载节点
  const getCont = () => {
    return document.getElementById('LayoutContent') as HTMLElement
  }

  return (
    <div>
      <Row>
        <Col span={18}>
          <div
            id="part-1"
            style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}
          >
            Part 1
          </div>
          <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>
            Part 2
          </div>
          <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>
            Part 3
          </div>
        </Col>
        <Col span={6}>
          <Anchor
            getContainer={getCont}
            targetOffset={targetOffset}
            items={[
              {
                key: 'part-1',
                href: '#part-1',
                title: 'Part 1',
              },
              {
                key: 'part-2',
                href: '#part-2',
                title: 'Part 2',
              },
              {
                key: 'part-3',
                href: '#part-3',
                title: 'Part 3',
              },
            ]}
          />
        </Col>
      </Row>

      {/* 该元素设置由fixed改为absolute，页面父级元素设置为relative */}
      <div
        style={{
          height: '30vh',
          background: 'rgba(0,0,0,0.85)',
          position: 'absolute',
          top: '10px', 
          left: '10px',
          // 宽度根据页面自定义增或减，此处为左右15共30px
          width: 'calc(75% - 30px)',
          color: '#FFF',
        }}
        ref={topRef}
      >
        <div>Fixed Top Block</div>
      </div>
    </div>
  );
};

export default AnchorPage;

 

官方为，父元素为整个window