vue-浏览器滚动事件——内容滚动，导航栏随之高亮

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量835 收藏 1
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50508597/article/details/119668031
版权

思路：
1：本人是基于vue框架，在使用offsetTop的时候找不到body所以首先用递归找到body
2：找出每一块内容的距离顶部的距离存起来
3：调用浏览器滚动事件
4:在事件内循环元素距离顶部的数组{ if(，如果浏览器滚动的距离+100（这个100是自己根据情况而定的，我的一百是基于元素的顶部标题位置）>=每一块内容的距离顶部[0]){
this.indexx=index
}}
5：通过vue的底层元素 给导航绑定：：class=‘indexx==index’?‘高亮样式’：‘’

整个思路就是这样，还望给你带来帮助，

追风少年_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现导航标题栏随页面滚动渐隐渐显效果
10-15
主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue之 点击标题滚动到对应位置 + 滚动影响上面的高亮
weixin_47409897的博客
11-16 1661
目录vue之 点击标题滚动到对应位置 + 滚动影响上面的高亮NavBar.vueHome.vue vue之 点击标题滚动到对应位置 + 滚动影响上面的高亮 NavBar.vue <template> <div class="nav_bar"> <div class="left"> <slot name="left">left</slot> </div> <div class="cente
VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现
qq_22317389的博客
05-21 3572
使用插件Bscroll，在依赖文件package.json中添加版本，在install，run之后使用 1）import BScroll from 2)BScroll实例化的时候要接收一个DOM，此处将实例化并获取DOM的过程封装成方法,获取DOM &lt;div class="menu-wrapper" ref="menuWrapper"&gt; &lt;div class="foods-...
js 原生点击高亮
爱吃蔬菜的博客
07-17 264
原生js实现高亮
vue列表滚动原生
qq_58976815的博客
07-21 56
/ 如果长度列表数据长度大于列表展示数量添加自动滚动。// 重新获取单个数据高度，并设置父节点高度。// 设置列表数据父节点隐藏多余数据。// 获取当前滚动条的位置。// 获取列表单个数据节点高度。// 当前排在最下方数据的序号。
图标高亮_给你代码：小程序内容滚动与导航栏自动高亮联动
weixin_31302227的博客
01-07 454
这是张非常好看的封面(小编：呵呵)这个标题想了很久，总感觉没有表达精准，毕竟要做的东西逼格比较高，不是只言片语所能概之。没图不说话，一图胜千言：(一千文字已凑满，本篇完。)催稿员：前言在持续迭代我们的鲲豆荚小程序过程中，需要开发一个分类导航浏览的功能：点击左边分类，右边可滚动到对应分类区域；上下滑动右边分类内容区域，左边对应的导航栏自动高亮；滚动要尽可能流畅，卡的不要！对于老司机来说，这种两栏布局...
vue锚点，滚动高亮导航
Y丶小琪
07-24 738
需求：锚点功能，点击导航滚动到可视区域。滚动内容区域，也可以高亮导航。
vue 楼层滚动（导航切换以及滚动高亮）
qq_55576151的博客
04-28 1255
加this.$nextTick()是因为，this.activeClass没有变化，应该是因为我再watch中调用这个函数的，此时dom还没有渲染出来，nextTick(callback)，当dom发生变化，更新后执行的回调。实现功能：左侧导航高亮，右侧滚动对应左侧导航，左边点击对应右边内容。滚动的距离的距离大于等于这些的时候让导航栏高亮。，当数据发生变化，更新后执行回调。第一层 i=0 0。
vue3页面点击按钮滚动条置顶、tabs滚动监听亮显、点击锚点跳转整合
qq_29715077的博客
08-02 1465
hooks文件夹>useBackTop.js。hooks文件夹>useBackTop.js。
vue导航栏根据页面滚动变化，点击导航栏滚动页面
clmmei_123的博客
11-02 3191
以下是两个导航栏按钮对应两个div。可以自己修改.我是参考 ==》博客《=== 的 这里是在computed下监听导航栏的点击事件，this.$refs = undefined。 1、可以在this.$nextTick(()=>{ //do something})中执行滚动事件 computed:{ ...mapState('menu', { navActive: 'navActive' }), childrenActive(){
vue的无缝滚动组件vue-seamless-scroll实例
08-28
本篇文章主要给大家讲解了vue的无缝滚动组件vue-seamless-scroll的用法，需要的朋友参考学习下吧。
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
主要介绍了vue 导航锚点_点击平滑滚动,导航栏对应变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-路由导航菜单栏的高亮设置方法
01-21
如下所示： 默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact...以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
12-12
在使用vue-router进行页面切换时，发现滚动条所处的位置被自动记录了下来，且在另一个组件内定义的滚动监听事件仍会运行，着实吃了一大惊。。。 说说我的破解方法： 1、在每个需要用vue-router切换的组件的mounted...
Spring Cloud Gateway直接管理Vue.js的静态资源
wddblog的博客
04-28 482
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
vue 预览 pdf pdf.js 的具体使用
努力搬砖的小码
04-29 1263
vue 预览 pdf pdf.js 的具体使用
element-ui的bug记录
nick_zhang的博客
04-29 377
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 492
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 122
注释很详细，直接上代码……
vue-seamless-scroll 监听滚动事件
09-13
要在 `vue-seamless-scroll` 组件中监听滚动事件，可以使用 `@scroll` 指令来实现。在组件上添加 `@scroll` 指令，并将其绑定到一个方法上，该方法将会在滚动事件触发时被调用。 以下是一个示例代码： ```vue <template> <div class="scroll-container" ref="scrollContainer"> <vue-seamless-scroll :data="scrollData" :speed="scrollSpeed" @scroll="handleScroll"> <template slot-scope="{ item }"> <div class="item">{{ item }}</div> </template> </vue-seamless-scroll> </div> </template> <script> export default { data() { return { scrollData: ['Item 1', 'Item 2', 'Item 3', 'Item 4'], // 滚动的数据 scrollSpeed: 50 // 滚动的速度 }; }, methods: { handleScroll() { // 在这里处理滚动事件 console.log('滚动事件触发'); } }, mounted() { // 获取滚动容器的 DOM 元素并添加滚动事件监听器 const scrollContainer = this.$refs.scrollContainer; scrollContainer.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { // 在组件销毁前，移除滚动事件监听器 const scrollContainer = this.$refs.scrollContainer; scrollContainer.removeEventListener('scroll', this.handleScroll); } }; </script> <style scoped> .scroll-container { width: 300px; height: 200px; overflow-y: auto; } .item { height: 50px; line-height: 50px; text-align: center; } </style> ``` 在上面的示例中，我们在 `vue-seamless-scroll` 组件的外层包裹了一个 `div`，并给其添加了一个类名为 `scroll-container` 的样式。 我们通过 `ref` 引用获取到这个滚动容器的 DOM 元素，并在 `mounted` 钩子函数中使用 `addEventListener` 方法添加了滚动事件监听器，监听器的回调函数为 `handleScroll`。 在 `handleScroll` 方法中可以处理滚动事件的逻辑，例如输出一个日志。同时，在 `beforeDestroy` 钩子函数中使用 `removeEventListener` 方法移除了滚动事件监听器，避免组件销毁后仍然继续监听滚动事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值