最新版Chrome浏览器,不存在兼容性问题,但我在vue3中使用scrollIntoView({behavior: "smooth"})滑动效果失效,我不配置平滑效果则可以正常跳转到相应位置,配置了则直接失效
时间: 2023-06-24 09:08:45 浏览: 284
【JavaScript源代码】vue开发移动端使用better-scroll时click事件失效的解决方案.docx
在 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);
```
希望以上方法能解决你的问题。
阅读全文