今日经验分享;
1.Vue中跳转至页面某个dom,且平缓滑行;
Submit (key) {
// 获取点击的按钮对应页面的id
var PageId = document.querySelector(key)
// 打印出对应页面与窗口的距离
console.log(PageId.offsetTop)
// 使用平滑属性,滑动到上方获取的距离
// 下方我只设置了top,当然 你也可以加上 left 让他横向滑动
// widow 根据浏览器滚动条,如果你是要在某个盒子里面产生滑动,记得修改
window.scrollTo({
'top': PageId.offsetTop,
'behavior': 'smooth'
})
},
但是有个新的问题,就是在移动端平缓滑动是不生效的;
解决方法:
// 安装这个插件
yarn add smoothscroll-polyfill 或者 npm i smoothscroll-polyfill
在你需要解决问题的页面引入:
import smoothscroll from 'smoothscroll-polyfill';
执行这个方法:
smoothscroll.polyfill();
好了问题解决。
2.页面中部导航滚动吸顶效果
position: sticky;
top: var(--window-top);