功能:

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项目锚点定位+滚动定位的更多相关文章

  1. vue项目锚点的使用

    在vue项目中如何使用锚点呢? 在vue-router中定义 scrollBehavior scrollBehavior (to, from, savedPosition) { if (savedPo ...

  2. hash实现锚点平滑滚动定位

    一.科普时间 hash hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). location.hash=anchorname. 锚点 锚点是网页制作中超级链接 ...

  3. 【转】cocos2d-x中锚点设置及定位方式

    http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...

  4. 仿微信未读RecyclerView平滑滚动定位效果

    效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...

  5. Angular关于$anchorScroll的定位滚动

    以下是实现定位滚动的代码: <!DOCTYPE html> <html lang="en" ng-app="app"> <head ...

  6. cocos2d-x中锚点设置及定位方式

    问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...

  7. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. 使用Cordova打包Vue项目

    因为公司项目要求, 原本的vue移动端项目, 现在要求能使用定位, 调用摄像头等功能, 并且开发成混合APP. 一个小白的孤军奋战史, 记录一下, 以备后用.... 第一步: 安装cordova 在命 ...

  10. Vue项目用于Ios和Android端开发

    起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...

随机推荐

  1. 机器学习策略篇:详解可避免偏差(Avoidable bias)

    可避免偏差 如果希望学习算法能在训练集上表现良好,但有时实际上并不想做得太好.得知道人类水平的表现是怎样的,可以确切告诉算法在训练集上的表现到底应该有多好,或者有多不好,让我说明是什么意思吧. 经常使 ...

  2. iOS手工Crash解析

    一.测试导出来一份ips crash文件,现在需要进行手工解析 现在需要下载对应的dsym文件,为了确定下载好的dsym文件和crash log是不是一致的,可以先看下dsym文件中的uuid p.p ...

  3. Ceph对象网关,多区域网关

    目录 Ceph对象网关,多区域网关 1. 文件系统与对象存储的区别 1.1 对象存储使用场景 1.2 对象存储的接口标准 1.3 桶(bucket) 2. rgw 2.1 对象存储认证 2.2 对象网 ...

  4. 面试官:说一说如何优雅的关闭线程池,我:shutdownNow,面试官:粗鲁!

    写在开头 面试官:"小伙子,线程池使用过吗,来聊一聊它吧!" 我:"好的,然后巴拉巴拉一顿输出之前看过的build哥线程池十八问..." 面试官满意的点了点头, ...

  5. Android应用程序启动流程浅析-(三万字长文慎点&Android14)

    在Android桌面Launcher源码浅析中介绍了Android的桌面程序Launcher是如何响应用户点击事件并启动App的,这篇文章继续介绍App在Android系统层是的启动流程. 一.启动流 ...

  6. 知乎x-zse-96逆向分析

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 aHR0cHM6 ...

  7. 在 TypeScript 中,extends

    extends 是一个关键字,用于指定类型参数的约束.它在类型参数的声明中使用,以确保类型参数满足特定的条件. 具体来说,extends 后面可以跟随一个类型,表示类型参数必须是该类型的子类型.在泛型 ...

  8. echarts做折线图

    先给大家看图 父组件      <el-container v-show="abscissa">         <lineEchart           :C ...

  9. kettle从入门到精通 第二十九课 job 循环 检验字段的值

    1.平常我们在用kettle设计job的时候,会用到循环来处理一些业务逻辑,比如循环检测某个表中的数据条数等.这个时候就会用到一个特别重要的步骤:检验字段的值. 下图是一个的通过初始化DNOE变量为f ...

  10. Nivdia向量数据库图检索最新标杆——CAGRA

    本文连接:https://wanger-sjtu.github.io/CARGA/ CAGRA 是 N社在RAFT项目中 最新的 ANN 向量索引.这是一种高性能的. GPU 加速的.基于图的方法,尤 ...