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 ...
随机推荐
- 机器学习策略篇:详解可避免偏差(Avoidable bias)
可避免偏差 如果希望学习算法能在训练集上表现良好,但有时实际上并不想做得太好.得知道人类水平的表现是怎样的,可以确切告诉算法在训练集上的表现到底应该有多好,或者有多不好,让我说明是什么意思吧. 经常使 ...
- iOS手工Crash解析
一.测试导出来一份ips crash文件,现在需要进行手工解析 现在需要下载对应的dsym文件,为了确定下载好的dsym文件和crash log是不是一致的,可以先看下dsym文件中的uuid p.p ...
- Ceph对象网关,多区域网关
目录 Ceph对象网关,多区域网关 1. 文件系统与对象存储的区别 1.1 对象存储使用场景 1.2 对象存储的接口标准 1.3 桶(bucket) 2. rgw 2.1 对象存储认证 2.2 对象网 ...
- 面试官:说一说如何优雅的关闭线程池,我:shutdownNow,面试官:粗鲁!
写在开头 面试官:"小伙子,线程池使用过吗,来聊一聊它吧!" 我:"好的,然后巴拉巴拉一顿输出之前看过的build哥线程池十八问..." 面试官满意的点了点头, ...
- Android应用程序启动流程浅析-(三万字长文慎点&Android14)
在Android桌面Launcher源码浅析中介绍了Android的桌面程序Launcher是如何响应用户点击事件并启动App的,这篇文章继续介绍App在Android系统层是的启动流程. 一.启动流 ...
- 知乎x-zse-96逆向分析
声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 aHR0cHM6 ...
- 在 TypeScript 中,extends
extends 是一个关键字,用于指定类型参数的约束.它在类型参数的声明中使用,以确保类型参数满足特定的条件. 具体来说,extends 后面可以跟随一个类型,表示类型参数必须是该类型的子类型.在泛型 ...
- echarts做折线图
先给大家看图 父组件 <el-container v-show="abscissa"> <lineEchart :C ...
- kettle从入门到精通 第二十九课 job 循环 检验字段的值
1.平常我们在用kettle设计job的时候,会用到循环来处理一些业务逻辑,比如循环检测某个表中的数据条数等.这个时候就会用到一个特别重要的步骤:检验字段的值. 下图是一个的通过初始化DNOE变量为f ...
- Nivdia向量数据库图检索最新标杆——CAGRA
本文连接:https://wanger-sjtu.github.io/CARGA/ CAGRA 是 N社在RAFT项目中 最新的 ANN 向量索引.这是一种高性能的. GPU 加速的.基于图的方法,尤 ...