优化Ant Design 下拉框伴页面滚动

在项目中使用antd的form组件，当一屏显示不完存在滚动条时，滑动滚动条会出现form中的下拉框伴随页面滚动的情况。通过重新绑定下拉框对应的父级定位元素，可优化这样的现象。

一、封装通用方法

export const scrollSelectFormUtils = (id: string) => {
  //获取当前元素
  const getPopupContainer: RenderDOMFunc = () => {
    return document.getElementById(id) as HTMLElement
  }
  //定位当前元素
  const scrollSelectFormProps: {
    id: string
    style: {
      // declare position css type
      position:
        | ‘inherit‘
        | ‘initial‘
        | ‘revert‘
        | ‘unset‘
        | ‘-webkit-sticky‘
        | ‘absolute‘
        | ‘fixed‘
        | ‘relative‘
        | ‘static‘
        | ‘sticky‘
        | undefined
    }
  } = {
    id,
    style: {
      position: ‘relative‘,
    },
  }
  return {
    getPopupContainer,
    scrollSelectFormProps,
  }
}

二、页面引入使用

import { scrollSelectFormUtils } from ‘****‘ //引入
//获取定义
const { getPopupContainer, scrollSelectFormProps } = scrollSelectFormUtils(
  ‘abnormal-list‘
)
//绑定form
<Form layout=‘inline‘ form={form} {...scrollSelectFormProps}>
 //绑定select
 <Select getPopupContainer={getPopupContainer}>

 </Select>

</Form>

showtooltip

优化Ant Design 下拉框伴页面滚动

原文：https://www.cnblogs.com/coding8832/p/14499001.html