在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. Java入门与进阶P-4.5+P-4.6

    逻辑类型 关系运算的结果是要给逻辑值,true或false.这个值可以保存在一个对应的逻辑类型变量中,这样的变量类型是boolean 布尔是为了纪念George Boole对逻辑计算得到贡献 bool ...

  2. Unity_UIWidgets - 组件AppBar

    Unity_UIWidgets - 组件AppBar AppBar 构造 构造png观看 使用代码 使用效果 AppBar使用结束 结语 图标Icon QQ 今日无推荐 Unity_UIWidgets ...

  3. Quartz.Net 官方教程 Best Practices

    最佳实践 JobDataMap 建议只存储基本数据(含String),避免序列化问题 作业执行期间,JobDetail和Trgger的底层共用一个JobDataMap 实例,因此Trigger的数据会 ...

  4. 【分析笔记】Linux I2C-Tools 使用踩坑笔记

    一.踩坑缘由 在调试 I2C 器件时,我一般习惯于使用 i2cdetect 工具来确认芯片是否有应答,通常有应答之后,就会开始着手移植或者编写对应的驱动程序,但是在调试 sgp41 传感器时却不灵了. ...

  5. Django-Django基本使用、app、三板斧

    1.纯手撸web框架 1.web框架的本质 理解1:连接前端与数据库的中间介质 理解2:socket服务端 2.手写web框架 1.编写socket服务端代码 2.浏览器访问响应无效>>& ...

  6. 洛谷p1423

    1 #include<bits/stdc++.h> 2 using namespace std; 3 int main() 4 { 5 double n;//n:要游的距离 6 cin&g ...

  7. C#网络爬虫开发

    1前言 爬虫一般都是用Python来写,生态丰富,动态语言开发速度快,调试也很方便 但是 我要说但是,动态语言也有其局限性,笔者作为老爬虫带师,几乎各种语言都搞过,现在这个任务并不复杂,用我最喜欢的C ...

  8. 通过URL地址将图片保存到本地

    今天一朋友问我如何通过URL地址将图片保存下来. 特地找了些资源,实现了一下代码: using System; using System.Drawing; using System.Drawing.I ...

  9. .net core 删除指定路径下的所有文件以及文件夹(文件夹建议保留目录)

    1.服务层 /// <summary> /// 删除指定路径下的所有文件 /// </summary> /// <param name="filepath&qu ...

  10. The Missing Semester - 第四讲 学习笔记

    第四讲 数据整理 课程视频地址:https://www.bilibili.com/video/BV1ym4y197iZ 课程讲义地址:https://missing-semester-cn.githu ...