2021-08-06

今日经验分享；

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);