在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 滑动到指定位置的更多相关文章

  1. RecyclerView滑动到指定位置,并置顶

    一般我们用 mRecycleview.smoothScrollToPosition(0)滑动到顶部,具有滚动效果,但是如果我们想滚动到任意指定位置,那么smoothScrollToPosition() ...

  2. jquery实现点击按钮滑动到指定位置

    <body> <script type="text/javascript"> function click_scroll() { var scroll_of ...

  3. 鼠标滑动到指定位置时div固定在头部

    $(function(){ $(window).scroll(function () {            if ($(window).scrollTop() > 253) {       ...

  4. Android RecyView 滑动置指定位置

    1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...

  5. JQuery滑动到指定位置

    $('html, body').animate({ scrollTop: next_tip.offset().top + "px"},500);

  6. 横向滑动的HorizontalListView滑动指定位置的解决方法

    项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...

  7. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  8. RecyclerView跳转到指定位置的三种方式

    自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...

  9. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  10. uni-城市列表滑动组件,点击字母跳转到指定位置

    本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...

随机推荐

  1. Ubuntu 22.04 GCC Arm 12.2.rel1编译 DAPLink

    ARMmbed / DAPLink 项目 仓库地址 https://github.com/ARMmbed/DAPLink Arm Mbed 应该属于Arm的机构或者是Arm资助的机构. 常用的 DAP ...

  2. 【一句话】@Configuration和@Component的区别

    首先一句话: @Configuration修饰的类会被Cglib动态代理,@Component不会. 详细: Cglib动态代理生成当前对象的子类Class,并对方法拦截,多次调用@Bean方法时直接 ...

  3. 重学SpringBoot. step7 高并发 秒杀

    高并发 高并发最容易出现的问题就是数据安全能不能得到保障. 你需要保证速度,又需要保证数据安全,那么速度也必然会有所下降. 所以最简单的办法就是提升硬件.或者把Mysql换成MongoDB,加个Red ...

  4. 【unity】EventSystem.current.IsPointerOverGameObject()报空指针错误的解决

    我前几天遇见了EventSystem.current.IsPointerOverGameObject()这么个问题,只要我一触发就给我报空指针!!我那时根本就没动这段码,但就是报错!!!卡了老子十小时 ...

  5. LinkedHashmap简要说明

    https://segmentfault.com/a/1190000012964859 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 H ...

  6. 逻辑运算符、成员运算符、身份运算符、流程控制、if判断、while循环

    目录 一.逻辑运算符 二.成员运算符 三.身份运算符 四.流程控制 五.分支结构 (1).单if判断 (2).双分支结构 (3).多分支结构 (4).if的嵌套使用 六.循环结构while (1).w ...

  7. 树莓派VNC复制粘贴

    1.安装sudo apt install autocutsel 2.运行autocutsel -f

  8. vue3语法糖+ts组件传值

    在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子组件可以通过一些值来进行关联 ...

  9. 图卷积神经网络分类的pytorch实现

    图神经网络(GNN)目前的主流实现方式就是节点之间的信息汇聚,也就是类似于卷积网络的邻域加权和,比如图卷积网络(GCN).图注意力网络(GAT)等.下面根据GCN的实现原理使用Pytorch张量,和调 ...

  10. 山石网科HCSA学习笔记

    山石HCSA学习笔记 目录 山石HCSA学习笔记 1 山石防火墙基础知识 1.1 基础概念介绍 1.2 介绍StoneOS处理包的Flow过程? 2 系统管理 3 搭建实验环境 4 安全策略 5 NA ...