功能:

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. MySQL中drop/truncate/delete的区别

    1.Delete语句执行删除的过程是每次从表中删除一行,并且同时将删除操作作为事务记录在日志中保存以便进行进行回滚操作(只删除表数据). delete是DML,执行delete操作时,每次从表中删除一 ...

  2. VMware Workstation解锁Mac系统

    VMware workstation在安装虚拟机的时候,如果是安装Windows.CentOS.Ubuntu等相关系统的话,仅仅需要一个系统镜像就可以顺利安装了. 但是如果想要安装苹果系统Mac的话, ...

  3. Django——messages消息框架

    在网页应用中,我们经常需要在处理完表单或其它类型的用户输入后,显示一个通知信息给用户.对于这个需求,Django提供了基于Cookie或者会话的消息框架messages,无论是匿名用户还是认证的用户. ...

  4. 一个与 WSL2 建立远程的简单方法

    前言 众所周知,windows 会通过虚拟交换机给本机和 wsl2(Linux 子系统)分别分配 ip.于是本机重启或重启 wsl 服务的时候会重新分配 ip.之前所作的端口转发,监听之类的都会失效. ...

  5. 基于React的SSG静态站点渲染方案

    基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法,其可以完全不需要服务端的运行,通过预先生成静 ...

  6. 从数据库设计到性能调优,全面掌握openGemini应用开发最佳实践

    本文分享自华为云社区<DTSE Tech Talk × openGemini :从数据库设计到性能调优,全面掌握openGemini应用开发最佳实践>,作者:华为云开源. 在本期<从 ...

  7. tar解压报错——Not found in archive tar: Exiting with failure status due to previous errors

    tar解压报错--Not found in archive [root@master software]# tar -xzf scala-2.11.8.tgz /usr/local/ tar: /us ...

  8. java.sql.SQLException: Connection is read-only. Queries leading to data modification are not

    java.sql.SQLException: Connection is read-only. Queries leading to data modification are not 产生的原因:事 ...

  9. java多线程-2-概念和实现机制

    知其然,而知其所以然! 在计算机领域,有多种操作系统,常见的有windows家族和unix/Linux家族,它们都支持多任务的计算模式. 它们实现多任务的机制是差不多的,这点在<<操作系统 ...

  10. .NET 认识日志系统-2

    .NET 日志系统2 上一篇文章是将日志打印到控制台,这篇文章将日志写入到文本文件中. 文本日志一般按照日期区分 如何避免文本日志把磁盘撑爆? 限制日志总个数或者总大小 如何避免一个日志文件太大? 限 ...