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为页面入口页 ...
随机推荐
- Windows10下yolov8 tensorrt模型加速部署【实战】
Windows10下yolov8 tensorrt模型加速部署[实战] TensorRT-Alpha基于tensorrt+cuda c++实现模型end2end的gpu加速,支持win10.linux ...
- mvn引用本地包
<dependency> <groupId>jna</groupId> <artifactId>jna</artifactId> <s ...
- CentOS即将停止维护,拥抱阿里“龙蜥“(Anolis OS),VMware安装Anolis OS与介绍
一.前言 大家在自己电脑来进行服务器的一些操作时,基本都是使用CentOS 7或者是CentOS 8,但是2021年底CentOS 8宣布停止了维护:CentOS 7 在2024年6月30日也会停止维 ...
- 构建api gateway之 动态插件
动态插件 之前已经拆解细点逐个介绍了 tcp .http 代理相关核心点,现在介绍一个让 api gateway 变得很灵活的功能实现: 动态插件. 由于 lua 的动态语言特点,我们可以比较方便做到 ...
- linux 基础(7)账号和群组的管理
了解账号和群组的基本信息 账号使用 如何查看 linux 计算机上有哪些账号呢?账号的信息储存在/etc/passwd中,打开就可以看到: less /etc/passwd root:x:0:0:ro ...
- ASP.NET Core 系列总结
<ASP.NET Core> 系列文章基于 .NET 3.1 和 .NET 6,主要是系统总结自己日常工作和学习中的知识点,之前是自己在 OneNote 上自己写,作为学习.总结笔记,逐渐 ...
- C-01\编译器和链接器以及真正的入口函数
编译器: 工具 编译器 路径 VC++6.0 CL.EXE(一段shell)只负责分析命令行参数,真正功能实现在C1.DLL.C1XX.DLL.C2.DLL C:\Program Files (x86 ...
- 一款备受欢迎的用户脚本管理器插件TampermonKey-油猴脚本管理器安装与使用
Tampermonkey简介 Tampermonkey是一款备受欢迎的浏览器扩展和用户脚本管理器,它适用于目前各种主流浏览器. 方便的脚本管理(正在运行的脚本和可以运行的脚本在图标处显示一览无余) 脚 ...
- C++并发-互斥元
1.std::mutex类 1.构造函数,std::mutex不允许拷贝构造,也不允许 move 拷贝,最初产生的 mutex 对象是处于 unlocked 状态的. 2.lock(),调用线程将锁住 ...
- JavaScript原型和原型链?有什么特点?
一.原型 JavaScript 常被描述为一种基于原型的语言--每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上 ...