(共566篇)
全部分类
browser浏览器基础知识 unicode码与ASCII码 other创业者需要知道的50句话 optimize前端优化方案 eslint对Promise方法解析报错 requireJS小结 h5一些小坑整理 markdown编辑器 element-ui2中改变tree组件的展示逻辑的两个方案 element-ui2中dialog组件的destroy-on-close无效问题 Sed教程 e2e测试常用函数手册 pipenv安装及在vscode中使用 gitlabrunner报错gitfetch-pack:expectedshallowlist与centos升级git版本到2.x 全链路压测实施 Locust后端压力测试 定时获取公网的IP信息 ES部分案例 接口数据处理规范 h5平滑滚动兼容安卓&ios 选择视频获取视频文件指定第几秒做封面图 钉钉内置浏览器flxtGrow的子元素不支持height百分比 H5通过Video标签视频播放试看功能 H5在IphoneX内页面底部遮挡不住home indacator 前端埋点案例 OSS上传文件前常用的处理函数(适用于普通PC) threeJS 与 ThingJS的区别

h5平滑滚动兼容安卓&ios
[ 未分类 ] 

普通vue项目，使用scrollTo方法进行滚动到指定位置

1
2
3
4

this.$refs.page.scrollTo({
   top: dom.offsetTop  // 需要滚动的距离
   behavior: 'smooth', // 平滑滚动到顶部
});

但是在ios环境中过渡动画会失效

解决方法：

1
2
3

yarn add smoothscroll-polyfill
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();

uniapp 滚动

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 该方法可以同时兼容安卓 ios
uni.pageScrollTo({
  duration: 500,
  scrollTop: 父元素.top - 子元素.top,
});

// 具体实现
query.select(".vip").boundingClientRect((res) => {
    uni.pageScrollTo({
        duration: 500,
        scrollTop: data.top - res.top,
    });
}).exec();