Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select在Drawer中下拉不随页面滚动 #916

Open
Sunxinqiang opened this issue Nov 30, 2023 · 2 comments
Open

Select在Drawer中下拉不随页面滚动 #916

Sunxinqiang opened this issue Nov 30, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@Sunxinqiang
Copy link

CodeSandbox
https://codesandbox.io/p/sandbox/rough-fire-6vqsjt?file=%2Fsrc%2FApp.vue

Description
重现步骤:

  1. 点开下拉
  2. 滚动页面
  3. 下拉会停留在之前的位置 不会跟着页面滚动
@Javey
Copy link
Member

Javey commented Dec 1, 2023

这是个常见问题,你需要指定Select的container属性,让它插入到滚动元素,对Drawer而言,滚动元素是k-dialog-body部分,但是插入到滚动元素下,有个弊端,那就是弹层超出滚动元素的范围,并不会展示,而是需要滚动才能看到全部

// 插入滚动元素中
<Select :container="dom => dom" />
<style>
.k-dialog-body {
    position: relatvie;
}
</style>

https://codesandbox.io/p/sandbox/tender-forest-hrj4ls?file=%2Fsrc%2FApp.vue%3A34%2C22

要彻底解决这个问题,需要组件监听滚动事件,然后事实算位置

@Javey Javey added the enhancement New feature or request label Dec 1, 2023
@Sunxinqiang
Copy link
Author

嗯嗯 添加contianer这种尝试过,在弹窗中用时,下拉还会往下展示撑高滚动区域,底部的下拉会被挡住,要滚动才能看到。
看了下iview的实现 他用了 popper.js去处理的下拉位置的,会找到滚动元素 监听滚动更新下拉位置。
有时间的话可以给优化支持下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants