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.

Sign up for GitHub

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

Jump to bottom

ScrollContainer的一个问题 #3046

Closed
wf2019 opened this issue Sep 19, 2023 · 4 comments
Closed

ScrollContainer的一个问题 #3046

wf2019 opened this issue Sep 19, 2023 · 4 comments
Labels
bug Something isn't working

Comments

@wf2019
Copy link

wf2019 commented Sep 19, 2023

我看见文档上面说是参考 element-ui 的 el-scrollbar 组件实现的。
但是我遇到一个问题，就是当ScrollContainer组件里面的内容高度发生变化的时候，滚动条的高度并没有因为内容的高度变化而变化。
这样就出现一个样式问题，就是内容高度增加了，滚动条可能需要超出容器才能滑动到底部。
相反的，内容高度减少了，滚动条可能滑动到一半的时候就到底了。。。
@wf2019
Copy link
Author

wf2019 commented Sep 19, 2023

在系统管理->账号管理->新增账号，将备注的输入框高度拖高就能复现。关闭重新打开，滚动条高度就正确了。

@likui628 likui628 added the bug Something isn't working label Oct 8, 2023
@likui628
Copy link
Collaborator

likui628 commented Oct 9, 2023

问题出在这里
image
监听不到resize的变化

DesignHhuang added a commit to DesignHhuang/vue-vben-admin that referenced this issue Oct 10, 2023
@DesignHhuang
fix: ScrollContainer的一个问题 vbenjs#3046
afcef4a
@DesignHhuang DesignHhuang mentioned this issue Oct 10, 2023
Merged
2 tasks
@DesignHhuang
Copy link
Contributor

问题出在这里 image 监听不到resize的变化

添加了一个scrollheight用来监听scrollbar内部元素的realheight，若realheight改变的话则重新计算scrollbar的sizeHeight。

@DesignHhuang
Copy link
Contributor

其实也可以使用原生的scrollbar，原生的scrollbar不会出现这种问题。
只要设置scrollbar组件的native为true就可以了，可以在代码中自行控制。如果native设置为false，可以采用 #3119 方式。
image

likui628 pushed a commit that referenced this issue Oct 10, 2023
@DesignHhuang
fix: ScrollContainer的一个问题 #3046 (#3119)
aa03c87
zyt520ham pushed a commit to zyt520ham/vue-vben-admin that referenced this issue Oct 17, 2023
@gavinZhang001
Merge branch 'main' into gavin/v4-dev-customrouter
80e273f 
* main: (48 commits)
  fix(LockModal): Cannot unlock (vbenjs#3143)
  Pr/code editor boardered (vbenjs#3142)
  chore: fix type:check error (vbenjs#3139)
  fix(customExport): Failure to export (vbenjs#3137)
  fix(full-screen): dom fullscreen status text (vbenjs#3130)
  fix(BasicForm): type instantiation is excessively deep and possibly infinite. (vbenjs#3128)
  chore: fix type:check error (vbenjs#3126)
  fix: #2744tabs选项卡渲染问题，以及完善路由中affix=true时处理逻辑。 (vbenjs#3127)
  chore: update `unplugin-config` (vbenjs#3120)
  chore(demo): 修正表单增删示例类型错误
  fix(demo): useForm中DatePicker，RangePicker 日期控件位置不对
  fix(Editor): ts类型错误
  chore(MenuItem): watch回调参数类型不一致
  fix(SimpleMenuTag): SimpleMenuTag的引用都改为动态组件引用,以消除打包警告.close vbenjs#3121
  chore(demo): 消除ts类型错误
  fix: ScrollContainer的一个问题 vbenjs#3046 (vbenjs#3119)
  fix(StrengthMeter): change事件应随handleChange一起抛出。close vbenjs#3118
  Revert "chore: update `unplugin-config` (vbenjs#3116)" (vbenjs#3117)
  chore: update `unplugin-config` (vbenjs#3116)
  fix(EditCellTable): 表格编辑行在使用Switch,checkedValue为数字时无法切换开关.close vbenjs#2560
  ...

# Conflicts:
#	pnpm-lock.yaml
#	src/components/Form/src/BasicForm.vue
#	src/components/Form/src/components/ApiSelect.vue
#	src/components/Form/src/hooks/useForm.ts
#	src/layouts/default/header/MultipleHeader.vue
#	src/views/demo/form/UseForm.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@DesignHhuang @wf2019 @likui628