vue 滑动到指定位置
在Vue中,有三种方式可以实现H5页面滑动至指定位置
方法1:
//先获取目标位置距离
mounted() {
this.$nextTick(() => {
setTimeout(() => {
let targetbox= document.getElementById('targetbox');
this.target= targetbox.offsetTop;
})
})
}
//再滑动指定距离
document.body.scrollTop = this.target;
方法2:
this.$nextTick(() => {
this.$refs.DOM.scrollTo(0,200);
})
方法3:
document.getElementById("target").scrollIntoView();
避坑指南:
方法1,滑动至的元素不能是display:none,存在兼容问题,亲测在部分ios机子上document.body.scrollTop滑动无效。
方法2,未亲测过,但在this.$nextTick(()里执行滑动,感觉有点麻烦。
方法3,亲测可用,ios和android都可。只是要注意,如果页面有监听scroll事件,scrollIntoView也会触发scroll事件的。
vue 滑动到指定位置的更多相关文章
- RecyclerView滑动到指定位置,并置顶
一般我们用 mRecycleview.smoothScrollToPosition(0)滑动到顶部,具有滚动效果,但是如果我们想滚动到任意指定位置,那么smoothScrollToPosition() ...
- jquery实现点击按钮滑动到指定位置
<body> <script type="text/javascript"> function click_scroll() { var scroll_of ...
- 鼠标滑动到指定位置时div固定在头部
$(function(){ $(window).scroll(function () { if ($(window).scrollTop() > 253) { ...
- Android RecyView 滑动置指定位置
1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...
- JQuery滑动到指定位置
$('html, body').animate({ scrollTop: next_tip.offset().top + "px"},500);
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- jQuery实现将div中滚动条滚动到指定位置的方法
1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...
- RecyclerView跳转到指定位置的三种方式
自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- uni-城市列表滑动组件,点击字母跳转到指定位置
本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...
随机推荐
- 使用ng-zorro图标库出现the icon redo-o does not exist or is not registered.
出现这种情况一般是因为没导入你要的图标 可以在项目目录找到这个文件 src\style-icons-auto.ts 然后打开,导入导出里加上你要导入的图标.... 就可以了 如果你不知道要怎么加 ...
- ChatGPT开发实战
1.概述 前段时间使用体验了ChatGPT的用法,感受到ChatGPT的强大,通过搜索关键字或者输入自己的意图,能够快速得到自己想要的信息和结果.今天笔者将深挖一下ChatGPT,给大家介绍如何使用C ...
- Gitlab配置ssh_key
一.背景 当前很多公司都选择git作为代码版本控制工具,然后自己公司搭建私有的gitlab来管理代码,我们在clone代码的时候可以选择http协议,当然我们亦可以选择ssh协议来拉取代码.那么我们就 ...
- 认识Spring MVC-概念-小demo
二:SpringMVC 异常码: 405:请求不允许 404:资源不存在 400:参数有问题 500:代码有问题 SpringMvc是Spring FrameWork提供的WEB组件,是目前的主流的实 ...
- 给力的Zstack云主机
合肥光源储存环纵向震荡可视化展示初步结果 前两天做好上面的可视化展示后,想着顺道把那个时间的二维图分析结果给出来吧,就又把纵向震荡的每个束团的频谱和相位顺道可视化显示出来,给计算这些结果的云主机又加点 ...
- concurrent-map 和 sync.Map,我该选择哪个?
concurrent-map 和 sync.Map,我该选择哪个? 官方的map并不是线程安全的,如果我们在多线程中并发对一个map进行读写操作,是会引发panic的.解决方案除了使用锁来对map进行 ...
- 依那西普减量维持过程中RA病人自报病情复发可能预示未来放射学进展[EULAR2015_SAT0147]
依那西普减量维持过程中RA病人自报病情复发可能预示未来放射学进展 SAT0147 SELF-REPORTED FLARES PREDICT RADIOGRAPHIC PROGRESSION IN ...
- 代码随想录算法训练营day20 | leetcode ● 654.最大二叉树 ● 617.合并二叉树 ● 700.二叉搜索树中的搜索 ● 98.验证二叉搜索树
LeetCode 654.最大二叉树 分析1.0 if(start == end) return节点索引 locateMaxNode(arr,start,end) new root = 最大索引对应节 ...
- Chai 3D之创建项目
推荐:将 NSDT场景编辑器 加入你的3D开发工具链 1.构建应用目录 我们将设置使用 CHAI3D 构建应用程序所需的基本目录结构和文件.根据您可能要使用的显示器或 GUI 库,为 FreeGL ...
- 慧销平台ThreadPoolExecutor内存泄漏分析
作者:京东零售 冯晓涛 问题背景 京东生旅平台慧销系统,作为平台系统对接了多条业务线,主要进行各个业务线广告,召回等活动相关内容与能力管理. 最近根据告警发现内存持续升高,每隔2-3天会收到内存超过阈 ...