Skip to content

table表格中,使用sticky 属性,造成底部滚动条bug #6879

@LOU-4599

Description

@LOU-4599
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.1

Environment

1、电脑:mac book pro ; M2pro ;13.4.1 。2、浏览器:谷歌;114.0.5735.198(正式版本) (arm64)。3、项目:"vue": "^3.2.45"

Reproduction link

https://codesandbox.io/s/track-visible-state-to-focus-first-element-in-drawer-forked-gywhn3?file=/src/demo.vue

Steps to reproduce

问题1:使用sticky属性后,当table内容过多一屏装不下的情况下,刷新浏览器重新加载界面,然后table底部,会出现两个滚动条。
问题2: 如果当前内容不够一屏的情况下,通过修改每页条数,来满足超过1屏幕内容时,滚动条吸附底部的效果不会出现。

What is expected?

问题1: 预期不会出现两个底部滚动条,而且解决虚拟滚动条卡顿问题
问题2: 预期当前内容不够一屏的情况下,通过修改每页条数,来满足超过1屏幕内容时,滚动条会自动吸附到底部。

What is actually happening?

table表格开启sticky属性后,在视觉上已经,功能上出现了实质性的bug


已经添加了可以复现的地址,正常情况下我们在封装后端管理系统的时候肯定会涉及到,超出滚动的,这块加了超出滚动之后,就会出现bug

复现步骤:
1、打开上面的链接,修改效果视窗,确保可以出现滚动轴,然后先切换到每页4条,然后再切换每页20条,滚到底部就能看见两个滚动轴。
image

2、直接刷新内置浏览器界面,当默认10条的情况下,滚动轴没有吸附到底部
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions