功能:

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. Android 12(S) MultiMedia(十四)ESQueue

    之前看到在ATSParser::Pogram::Stream中会创建一个ESQueue,用于存储解析出来的ES data,这个ESQueue到底是用来做什么的呢?这节就来研究研究. 1.构造函数 ES ...

  2. FreeRTOS例程开发

    环境配置 下载官方源码 https://www.freertos.org/ 找到这个,他就是visual studio示例demo,我们主要在这个的基础上修改 下载visio studio https ...

  3. Codes 重新定义 SaaS 模式的研发项目管理平台开源版 4.5.3 发布

    一:简介 Codes 重新定义 SaaS 模式 = 云端认证 + 程序及数据本地安装 + 不限功能 + 30 人免费  Codes  是一个 高效.简洁.轻量的一站式研发项目管理平台.包含需求管理,任 ...

  4. itest(爱测试) 开源接口测试,敏捷测试管理平台10.0.0GA 发布

    一:itest work 简介 itest work 开源敏捷测试管理,包含极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试,接口Mock,还有压测 ,又有丰富的统计分析,8合1工作站.可按 ...

  5. 剑指Offer-56.删除链表中重复的结点(C++/Java)

    题目: 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后为 ...

  6. 使用极限网关助力 ES 集群无缝升级、迁移上/下云

    在工作中大家可能会遇到以下这些场景: 自建 ES 集群需要平滑迁移到 XX 云: 从 XX 云将 ES 集群迁移到自建机房: ES 集群进行跨版本升级,同时保留回退能力: 这些场景往往都还有个共同的需 ...

  7. 腾讯视频遇到“前设备播放4K可能引发卡顿等异常,建议降低清晰度”

    腾讯视频遇到"前设备播放4K可能引发卡顿等异常,建议降低清晰度". 解决方法: 在菜单-设置-播放设置-勾选"开启硬件加速"-应用,然后退出腾讯视频,重新打开腾 ...

  8. 制作Jdk镜像

    本文介绍用Dockerfile的方式构建Jdk镜像,请保证安装了Docker环境. 首先创建/opt/jdk目录,后续步骤都在该目录下进行操作. 准备好Jdk安装文件,放到/opt/jdk目录下. 编 ...

  9. Python 使用Matplotlib绘制可拖动的折线

    Python 使用Matplotlib绘制可拖动的折线 效果图:  可以拖曲线上的点调整, 也可以拖旁边的sliderbar调整. 代码如下: import matplotlib.animation ...

  10. Vs生成后 自动压缩 删除多余xml

    setlocal enabledelayedexpansionset ProjectName=$(ProjectName)del /s /q /f "$(ProjectDir)bin\Deb ...