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

Feat scrollbar auto hide and show #71

Closed
wants to merge 18 commits into from
Closed

Feat scrollbar auto hide and show #71

wants to merge 18 commits into from

Conversation

arsize
Copy link
Contributor

@arsize arsize commented Jun 30, 2023

🤔 这个变动的性质是？ (至少选中一项)

  • 日常 bug 修复
  • 新特性提交
  • 组件样式/交互改进
  • 重构
  • 代码风格优化
  • 包体积优化
  • 性能优化
  • 其他改动（是关于什么的改动？）

🔗 相关 Issue

💡 需求背景和解决方案

解决方案：

增加一个滚动条状态变量，在onscroll函数中变更状态，同时绑定css变量进行样式变化，3s无滚动触发则隐藏

📝 更新日志

语言 更新描述
🇺🇸 英文
🇨🇳 中文

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

🚀 概述

copilot:summary

🔍 实现细节

copilot:walkthrough

Evansy and others added 14 commits June 4, 2023 13:46
@Evansy
Update issue templates (Evansy#23)
5e40239
@Evansy
Merge branch 'main' into develop
38cfaf4
@AuYuHui
feat: 右键菜单复制文本内容 (Evansy#26)
f9b5b51 
* feat: 右键菜单复制文本内容

* fix: 修复未登录前emoji标签可输入

* fix: 聊天操作显示时滚动可能会超出列表

* fix: 移动端 msgOption, 宽度太小溢出
@Evansy
feat: 新增回复跳转功能
069b4c7
@Evansy
Merge branch 'feature/新增回复跳转功能' into develop
8139435
@Evansy
fix: 修复 pointer 左边不生效，滚动到消息有动画效果，优化滚动条
1d4080e
@Evansy
Merge branch 'feature/新增回复跳转功能' into develop
0e57c52
@Evansy
fix: 修复滚动动画
1c66692
@Evansy
Merge branch 'feature/新增回复跳转功能' into develop
b790784
@Evansy
chore: 删除无用template
eb2bf16
@oljc
feat: 新增点赞操作实时动画交互展示功能 (Evansy#28)
d86dcfe
@edram
chore(env): 支持环境多变量配置 (Evansy#43)
794412d
@Evansy
Merge branch 'main' into develop
a88b5f6
清空缓存的消息 (Evansy#68)
60d69ca
@oljc
Copy link
Contributor

oljc commented Jul 1, 2023

似乎不需要你这样创建一个滚动来处理。不够通用，滚动地方多了你这方案就不适用了。
建议全局样式文件中新增一个class：scroll-hover 来写滚动条hover效果（比如目前的main.css中的滚动条样式），使用时只需在滚动的元素上添加该class名即可。
image

@arsize
Copy link
Contributor Author

arsize commented Jul 1, 2023

似乎不需要你这样创建一个滚动来处理。不够通用，滚动地方多了你这方案就不适用了。 建议全局样式文件中新增一个class：scroll-hover 来写滚动条hover效果（比如目前的main.css中的滚动条样式），使用时只需在滚动的元素上添加该class名即可。 image

但是这个需求并不是滚动条hover效果，而是在滚动时出现，一定时间后自动消失，所以监听滚动事件不可避免，我想一下能不能移到全局处理。

@Evansy
Copy link
Owner

Evansy commented Jul 1, 2023

也许可以考虑处理成指令

@arsize
Copy link
Contributor Author

arsize commented Jul 3, 2023

也许可以考虑处理成指令

已增加v-scroll指令，监听wheel事件自动添加‘auto-hide-scroll’和‘auto-show-scroll’类名，控制滚动条显隐

Evansy
Evansy requested changes Jul 4, 2023
View reviewed changes
src/directives/v-scroll.ts Outdated Show resolved Hide resolved
src/directives/v-scroll.ts Outdated Show resolved Hide resolved
src/views/Home/components/UserList/index.vue Outdated Show resolved Hide resolved
@oljc
Copy link
Contributor

oljc commented Jul 5, 2023

这个pr里有历史版本的东西没去掉 合并了会还原回之前的代码。很多代码已经变了比如Toolbar

@arsize
Copy link
Contributor Author

arsize commented Jul 5, 2023

这个pr里有历史版本的东西没去掉 合并了会还原回之前的代码。很多代码已经变了比如Toolbar

已拉取develop分支最新代码。

Evansy
Evansy approved these changes Jul 5, 2023
View reviewed changes
Copy link
Owner

@Evansy Evansy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感谢PR~

@Evansy
Copy link
Owner

Evansy commented Jul 5, 2023

这个pr里有历史版本的东西没去掉 合并了会还原回之前的代码。很多代码已经变了比如Toolbar

已拉取develop分支最新代码。

Main才是最新的，拉一下Main哈

@arsize
Copy link
Contributor Author

arsize commented Jul 6, 2023

这个pr里有历史版本的东西没去掉 合并了会还原回之前的代码。很多代码已经变了比如Toolbar

已拉取develop分支最新代码。

Main才是最新的，拉一下Main哈

已合并main最新代码

@Evansy Evansy changed the base branch from develop to main July 6, 2023 02:04
@Evansy
Copy link
Owner

Evansy commented Jul 6, 2023

不好意我我改错了，本意是不想应用 tsconfig 的格式化更改，结果搞删除了，麻烦帮我恢复一下 tsconfig。

@Evansy Evansy added the enhancement New feature or request label Jul 6, 2023
@Evansy Evansy linked an issue Jul 6, 2023 that may be closed by this pull request
feature: 滚动条在无hover和不滚动时进行隐藏 #16
Open
@arsize arsize closed this Jul 14, 2023
@Evansy
Copy link
Owner

Evansy commented Jul 14, 2023

大佬怎么关闭了，改下 tsconfig 再提交下吧~ @arsize

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Evansy Evansy Evansy approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feature: 滚动条在无hover和不滚动时进行隐藏
5 participants
@arsize @oljc @Evansy @AuYuHui @edram