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(Anchor): add customScroll API to support custom scroll behavior #4386

Merged
merged 8 commits into from
Nov 19, 2024
Merged

feat(Anchor): add customScroll API to support custom scroll behavior #4386

merged 8 commits into from
Nov 19, 2024

Conversation

boogie-ben
Copy link
Contributor

@boogie-ben boogie-ben commented Jul 9, 2024 •
edited by uyarn
Loading

🤔 这个 PR 的性质是？

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

锚点链接点击后会调用handleScroll到锚点目标元素的位置，支持禁用这一行为，把滚动行为交由用户控制
如用户设定了滚动容器样式scroll-behavior: smooth时
如nuxt中可能会与其默认的router.options.scrollBehavior冲突

Tencent/tdesign-common#1981

📝 更新日志

  • feat(anchor-item): 新增 customScroll API，支持关闭默认滚动动画，由用户可自定义锚点滚动的行为

  • 本条 PR 不需要纳入 Changelog

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

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

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 9, 2024 •
edited
Loading

完成

@uyarn uyarn added the 💭 discussion we are discussing label Jul 9, 2024
PengYYYYY
PengYYYYY previously approved these changes Jul 10, 2024
View reviewed changes
@PengYYYYY PengYYYYY dismissed their stale review July 10, 2024 15:19

没看到 discussion 标签

boogie-ben
boogie-ben commented Jul 18, 2024
View reviewed changes
Copy link
Contributor Author

@boogie-ben boogie-ben left a comment

Choose a reason for hiding this comment

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

👌

boogie-ben
boogie-ben commented Jul 18, 2024
View reviewed changes
Copy link
Contributor Author

@boogie-ben boogie-ben left a comment

Choose a reason for hiding this comment

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

需要提供demo之类的吗

@uyarn
Copy link
Collaborator

uyarn commented Sep 25, 2024

@boogie-ben 辛苦增加下DEMO

@uyarn uyarn added 💪🏻 enhancement New feature or request and removed 💭 discussion we are discussing labels Sep 25, 2024
@boogie-ben
Copy link
Contributor Author

@boogie-ben 辛苦增加下DEMO

https://stackblitz.com/edit/vitejs-vite-b8b6md?file=src%2FApp.vue

这个情况是，当滚动容器是设置了 scroll-behavior: smooth，那么在页面内的锚点跳转是已经有css原生支持的平滑滚动效果，当点击demo左侧的锚点links的时候就是css平滑滚动的效果。

但是如果同时在页面上使用了 Anchor 组件，在点击 AnchorItem 进行页内跳转的时候，会调用 anchor.handleScrollTo(href) 方法进行js滚动，导致和css平滑滚动效果冲突

  • 可以点击demo右侧的 AnchorItem 尝试冲突的滚动效果，表现既不是 anchor.handleScrollTo(href)，也不是css平滑滚动
  • 可以去掉下方的 scroll-behavior: smooth 样式，再点击 AnchorItem 对比正常的 anchor.handleScrollTo(href) 滚动表现

所以希望支持用户可以配置在点击 AnchorItem 是否进行滚动过渡，从而避免和用户自定义的滚动行为引起冲突

@boogie-ben
Copy link
Contributor Author

确认的话，我再给vue2库、react库和api库加对应的改动

@boogie-ben
Copy link
Contributor Author

@uyarn

@boogie-ben boogie-ben changed the title feat(anchor-item): 新增API(disableScroll)，支持禁用滚动控制 feat(anchor-item): 新增API(customScroll)，支持关闭js滚动动画，用户可自定义锚点滚动 Nov 17, 2024
@boogie-ben boogie-ben mentioned this pull request Nov 17, 2024
Merged
16 tasks
@boogie-ben
Copy link
Contributor Author

文档demo已更新Tencent/tdesign-common#1981

@uyarn
Copy link
Collaborator

uyarn commented Nov 19, 2024

/update-common

@uyarn uyarn removed the 💪🏻 enhancement New feature or request label Nov 19, 2024
@uyarn
Copy link
Collaborator

uyarn commented Nov 19, 2024

/update-snapshot

@github-actions GitHub Actions
Copy link
Contributor

⏳ 正在运行快照更新。。。 CI: Open

@uyarn uyarn changed the title feat(anchor-item): 新增API(customScroll)，支持关闭js滚动动画，用户可自定义锚点滚动 feat(anchor-item): add acustomScroll API to support custom scroll behavior Nov 19, 2024
@uyarn uyarn changed the title feat(anchor-item): add acustomScroll API to support custom scroll behavior feat(Anchor): add acustomScroll API to support custom scroll behavior Nov 19, 2024
@uyarn uyarn changed the title feat(Anchor): add acustomScroll API to support custom scroll behavior feat(Anchor): add customScroll API to support custom scroll behavior Nov 19, 2024
@uyarn
Copy link
Collaborator

uyarn commented Nov 19, 2024

API录入 TDesignOteam/tdesign-api#476

@uyarn uyarn merged commit f664d88 into Tencent:develop Nov 19, 2024
7 checks passed
@github-actions github-actions bot mentioned this pull request Nov 20, 2024
Merged
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@uyarn uyarn uyarn approved these changes

@PengYYYYY PengYYYYY PengYYYYY left review comments

@chaishi chaishi Awaiting requested review from chaishi chaishi is a code owner

@xiaosansiji xiaosansiji Awaiting requested review from xiaosansiji xiaosansiji is a code owner

@honkinglin honkinglin Awaiting requested review from honkinglin honkinglin is a code owner

@LeeJim LeeJim Awaiting requested review from LeeJim LeeJim is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@boogie-ben @uyarn @PengYYYYY