vue项目锚点定位+滚动定位
功能:
HTML:
js:
scrollEvent(e) {
let scrollItems = document.querySelectorAll('.condition-container')
for (let i = scrollItems.length - 1; i >= 0; i--) {
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
if (judge) {
this.activeClass = i
break
}
}
// 滚动条触底了
if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {
this.activeClass = 4 - 1
}
},
getActiveClass(index) {
this.activeClass = index
let jump = document.querySelectorAll('.condition-container')
jump[index].scrollIntoView({ block: 'start', behavior: 'smooth' })
}
vue项目锚点定位+滚动定位的更多相关文章
- vue项目锚点的使用
在vue项目中如何使用锚点呢? 在vue-router中定义 scrollBehavior scrollBehavior (to, from, savedPosition) { if (savedPo ...
- hash实现锚点平滑滚动定位
一.科普时间 hash hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). location.hash=anchorname. 锚点 锚点是网页制作中超级链接 ...
- 【转】cocos2d-x中锚点设置及定位方式
http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...
- 仿微信未读RecyclerView平滑滚动定位效果
效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...
- Angular关于$anchorScroll的定位滚动
以下是实现定位滚动的代码: <!DOCTYPE html> <html lang="en" ng-app="app"> <head ...
- cocos2d-x中锚点设置及定位方式
问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- 使用Cordova打包Vue项目
因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...
- Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
随机推荐
- 鸿蒙HarmonyOS实战-Web组件(页面跳转和浏览记录)
前言 页面跳转是指在浏览器中从当前页面跳转到另一个页面的操作.可以通过点击链接.输入网址.提交表单等方式实现页面跳转. 浏览记录是指记录用户在浏览器中浏览过的页面的历史记录.当用户跳转到一个新页面时, ...
- nfs 加 auto 自动挂载/etc/fstab;autofs
一,用/etc/fstab 1.在/etc/fstab里面添加一条配置文件 vim /etc/fstab #在里面添加一条配置信息 192.168.200.10:/opt/share2 /mnt/sh ...
- Python实现求多个集合之间的并集-方法2
之前使用过一种方法实现求集合间的并集,参考文章:https://www.cnblogs.com/mrlayfolk/p/12373532.html,这次使用另外一种方法实现,这种方法效率更高. 目的: ...
- ABC351
我多久没更新这个系列了啊 E 把格子分成两类,每一类之间的坐标均可互相走到. 然后将这里面的点都旋转 \(45\) 度,于是这个问题就被转换成曼哈顿距离的问题了. 我们可以把 \(x\) 和 \(y\ ...
- windows 命令行调整分辨率
windows 命令行调整分辨率 下载:qres_v1.1 https://abcker.lanzouq.com/i1uzA1a5uo8j 解压出来,如:D:\Soft\QRes,不要使用中文名目录. ...
- 神奇的JavaScript弱等价类型转换
JavaScript语言特性 - 类型转换 JavaScript这门语言的类型系统从来没有它表面看起来的那样和善,虽然比起Java.C#等一众强类型语言,它的弱类型使用起来似乎是如此便利,但正因为它极 ...
- Vue学习:2.V标签综合2
接上一篇... V标签综合使用:书架案例 功能: 实现列表的渲染和删除 思路: 使用 v-for 渲染数据列表,并在每个列表项内放置一个绑定了 del方法的"删除"按钮,点击按钮时 ...
- session 和 cookie 有什么区别?
a.存储位置不同:session 存储在服务器端:cookie 存储在浏览器端. b.安全性不同:cookie 安全性一般,在浏览器存储,可以被伪造和修改. c.容量和个数限制:cookie 有容量限 ...
- 实训day2
HTML基本介绍 编辑网页的语言,超文本标记语言,是迄今为止网络上应用最为广泛的语言,也是抱成网页文档的主要语言.HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声 ...
- opengrok源代码在线阅读平台搭建及字体修改
服务搭建 我所编写的docker-compose.yml如下,成功运行后将源码目录移动至 /data/opengrok/src ,重启容器使得opengrok快速更新索引 services: open ...