target.md

order	title
2	zh-CN en-US 滚动容器 Container to scroll.

zh-CN

用 target 设置 Affix 需要监听其滚动事件的元素，默认为 window。

en-US

Set a target for 'Affix', which is listen to scroll event of target element (default is window).

import { Affix, Button } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [container, setContainer] = useState<HTMLDivElement | null>(null);

  return (
    <div className="scrollable-container" ref={setContainer}>
      <div className="background">
        <Affix target={() => container}>
          <Button type="primary">Fixed at the top of container</Button>
        </Affix>
      </div>
    </div>
  );
};

export default App;

<style> #components-affix-demo-target .scrollable-container { height: 100px; overflow-y: scroll; } #components-affix-demo-target .background { padding-top: 60px; height: 300px; background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg'); } </style>