在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. springcloud与微服务

    springcloud 与 微服务 父工程(按需导入依赖) <!--打包--> <packaging>pom</packaging> <properties& ...

  2. 读Java8函数式编程笔记05_数据并行化

    1. 并发 1.1. 两个任务共享时间段 1.2. 一个程序要运行两个任务,并且只有一个CPU给它们分配了不同的时间片,那么这就是并发,而不是并行 2. 并行 2.1. 两个任务在同一时间发生 2.2 ...

  3. 如何在 C# 项目中链接一个文件夹下的所有文件

    在 C# 项目中通过链接方式引入文件可以让我们在项目中使用这些文件中的代码.常见的比如链接 AssemblyInfo.cs 文件,这样我们就可以在项目中使用这个文件中的版本号等信息.但是如果我们想要链 ...

  4. java控制接口超时时间

    package com.xf; import java.util.concurrent.Callable; public class bbb implements Callable { private ...

  5. Django框架之drf:9、接口文档,coreapi的使用,JWT原理、介绍、快速使用、定制、认证

    目录 Django框架之drf 一.接口文档 二.CoreAPI文档生成器 1.使用方法 三.JWT 1.JWT原理及介绍 2.JWP快速使用 3.定制返回格式 4.JTW的认证类 Django框架之 ...

  6. C++_虚函数

    1.目的: 派生类继承自基类.使用指针或引用访问派生类对象时,指针或引用本身所指向的类型可以是基类而不是派生类.如果派生类覆盖了基类中的方法,通过上述指针或引用调用该方法时,可以有两种结果: 调用到基 ...

  7. Lucky Tree

    题目:http://codeforces.com/problemset/problem/109/C 题意:一棵树n个节点,组成一个图,每条边都有权值,对于i.j.k三个数,计算所有的 i 到 j 和 ...

  8. 如何将 Autofac 整合进 Net6.0 Core MVC 项目中

    一.前言 1.前言 Asp.Net Core Mvc,我也用了很长一段时间了,它现在的编程模型和方式还是特别棒的,都是组件开发,什么都可以替换,当然了,您别抬杠,有些还是不能替换的.自从我们进入了跨平 ...

  9. DIV 阴影

    <div class="div">111</div> .div { width:200px; height:200px; box-shadow: 0 0 1 ...

  10. LeetCode-1219 黄金矿工

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/path-with-maximum-gold 题目描述 你要开发一座金矿,地质勘测学家已经探明了这 ...