Skip to content

select、TimePicker等组件在非body出现滚动条时,滚动时位置有bug #3487

Closed
@smilce

Description

@smilce
  • antd 版本:1.9.1
  • 操作系统及其版本:所有操作系统
  • 浏览器及其版本:所有浏览器

问题描述

select、TimePicker等组件,当放置到某节点,并且这个节点有滚动条时,当这个节点滚动时,弹出的option层、日历选择层等停留在原有位置,不跟随滚动。这个问题还是挺常见的,比如将这类控件放到Modal里、放到Table里等(放入的这些控件自己设置了overflow:auto)。

问题原因

弹出的层放到了和初始展示节点不同的节点中,导致了弹出层是相对于body进行绝对定位,而当初始展示节点在一个带滚动条的节点时,这个节点在滚动时,body并没有变化,就造成了弹出层不随浏览器滚动的问题。这个应该是rc-select等底层组件的bug。

示例

打开 TimePicker官方API在控制台将.code-box的样式增加

height: 100px;
overflow: auto;

在任意一个例子中点击组件弹出日历弹出层,然后滚动那个节点的滚动条

建议解决方式

将弹出的层放到了和初始展示节点放到同一个父节点中,弹出层相对于这个父节点进行绝对定位。

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❓FAQissues would be discussed a lot

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions