功能:

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. MR+meta分析的摘录

    第四篇公众号:来自微信 天桥下的卖艺者 零基础说科研,仅为个人学习用,如有侵权,可以删除 吸烟没什么创意,唯一的创意就是加入了MR和meta分析,作者显示介绍吸烟与多种疾病之间的因果关系扔不明确, 第 ...

  2. RTMP推流FLV插入自定义SEI数据总结

    一.需求 在RTMP推送的流中添加一个接口,可以添加自定义的数据(一段字节数组). 经过分析,在H264的流中可以通过SEI添加自定义数据,下面是实施的总结 二.实施 1)准备工具 RTMP推流客户端 ...

  3. Python爬虫 | 批量爬取今日头条街拍美图

    01 前言 上篇文章我们爬取了今日头条街拍美图,心情相当愉悦,今天这篇文章我们使用Selenium来爬取当当网的畅销图书排行.正所谓书中自有黄金屋,书中自有颜如玉,我们通过读书学习来提高自身的才华,自 ...

  4. js 检测文本是否溢出

    自定义指令的方式 手写实现 /** * 检测文本是否溢出 * 参考 https://github.com/ElemeFE/element/blob/dev/packages/table/src/tab ...

  5. docker构建镜像——Dockerfile

    from RUN CMD EXPOSE LABEL ENV COPY 格式 COPY [--chown=<用户>:<组>]<源>...<目的> COPY ...

  6. 初学go语言

    for(int a = 0; a<10 ; a++){ // c语言的循环 } for a := 0 ; a<10 ; a++ {     // go语言的循环 } // for二边的括号 ...

  7. OAuth + Security - 4 - 客户端信息存储数据库

    PS:此文章为系列文章,建议从第一篇开始阅读. 在之前的所有配置中,我们的客户端信息和授权码模式下的授权码任然还是存储在数据库中的,这样就不利于我们后期的扩展,所以在正式的生成环境中,我们一般将其存储 ...

  8. PI规划会,研发团队价值聚焦的一剂良方

    随着数字化建设如火如荼地推进,中大型企业的数字化建设团队规模也越来越大,团队规模的扩大一方面带来了更多产能与可能性,另一方面,不同的角色在不同的业务场景也带来了一些现实问题,例如: 作为CIO 或产品 ...

  9. C# 循环枚举

    foreach (int eemun in Enum.GetValues(typeof(类名))) { string sName = Enum.GetName(typeof(类名), eemun);/ ...

  10. c# 基础小知识备忘录

    记性不大好,记下来 First 和 FirstOrDefault  First方法:返回List集合序列中的第一个符合条件的元素,如果没有查找到,则抛出运行时异常. FirstOrDefault方法: ...