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

feat(anchor-item): 新增API(disableScroll),支持禁用滚动控制 #4386

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

boogie-ben
Copy link
Contributor

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

💡 需求背景和解决方案

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

📝 更新日志

  • feat(anchor-item): 新增API(disableScroll),支持禁用滚动控制

  • 本条 PR 不需要纳入 Changelog

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

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

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

Copy link
Contributor

github-actions bot commented Jul 9, 2024

完成

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

没看到 discussion 标签

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.

👌

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库加对应的改动

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

Successfully merging this pull request may close these issues.

3 participants