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 ...
随机推荐
- Linux下的物理CPU和逻辑CPU
1.物理CPU (1)物理CPU是指:机器中插槽上的实际CPU个数. (2)物理CPU的数量:可以通过不重复的physical id来查询. (3)命令: cat /proc/cpuinfo | gr ...
- 深入浅出Java异常机制
一次对Java异常机制的理解 近期有一个对接三方接口的任务,在这个过程中用到了许多 try-catch 处理,发现自己对异常处理是一知半解,浅浅研究了一下,记录一下,也帮助小伙伴如何正确使用 try- ...
- Swift全局变量的线程安全分析
一.示例代码 import UIKit let obj = TestObj() class TestObj { init() { print("\(type(of: self)) init& ...
- 震惊!docker镜像还有这些知识你都知道吗
震惊!docker镜像还有这些知识你都知道吗? 镜像搜索 语法 [root@hmm docker-hello]# docker search -h Flag shorthand -h has been ...
- ETL工具-nifi干货系列 第十七讲 nifi Input Port&Out Port 实战教程
1.端口(Port),包含输入端口(Input Port)和输出端口(Out Port ) 使用一个或多个处理组构建的数据流需要一种方式将处理组连接到其他数据流组件. 处理组和处理组之间可以通过使用端 ...
- mongodb数据库连接格式
mongodb数据库连接格式 mongodb://账号:密码@mongodb服务器IP:27017/数据库名称
- HTML5 在泛在电力物联网的 10 大业务领域 2/3D 可视化应用
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地. 2019 年可以定 ...
- Windows查看电源使用情况
这里使用Windows自带的东西查看电源使用情况. 1.按Win键+R,输入cmd,回车. 2.输入Powercfg /batteryreport回车. 3.根据提示找到电池报告文件,双击打开即可.
- 2020-2021 ICPC, NERC, Northern Eurasia Onsite BEIJ 题解
B. Button lock 题意:有 \(d\) 个 01 按键以及一个 reset 按键,你需要把所有题目给定的 \(n\) 个密码全部表示一遍.只有按下 reset 按键后才能使所有 01 按键 ...
- centos如何统计磁盘使用总量,以及cpu使用率
剩余硬盘容量 T: df | awk '{print $4}' |sed 's/Available//g' |sed '/^\s*$/d' | awk '{sum+=$1} END {print su ...