最新版Chrome浏览器,不存在兼容性问题,但我在vue3中使用scrollIntoView({behavior: "smooth"})滑动效果失效,我不配置平滑效果则可以正常跳转到相应位置,配置了则直接失效
时间: 2023-06-24 08:08:45
浏览: 251
在 Chrome 中,滚动平滑效果可以通过 CSS 属性 `scroll-behavior` 来实现,如果你的代码中同时使用了 `scrollIntoView` 方法和 `scroll-behavior` 属性,可能会出现冲突导致滑动效果失效的问题。
你可以尝试通过以下方法解决问题:
1. 将 `scrollIntoView` 方法中的 `behavior` 参数设为 `"auto"`,这样就不会与 `scroll-behavior` 属性冲突,但是此时滚动效果会是默认的直接跳转。
2. 在使用 `scrollIntoView` 方法之前,将页面的 `scroll-behavior` 属性设为 `"auto"`,待跳转完成后再将其设置回 `"smooth"`。
```javascript
// 将页面的 scroll-behavior 属性设为 "auto"
document.documentElement.style.scrollBehavior = "auto";
// 使用 scrollIntoView 方法跳转
document.getElementById("target-element").scrollIntoView({ behavior: "smooth" });
// 跳转完成后将 scroll-behavior 属性设置回 "smooth"
setTimeout(() => {
document.documentElement.style.scrollBehavior = "smooth";
}, 1000);
希望以上方
最低
0.47元/天
开通会员,查看完整答案
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
C知道免费提问
付费资源9折优惠