vue实现锚点跳转及滚动监听的方法

vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下

*注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后一个元素就滚动不上去,

scrollIntoView接口的具体参数说明

实际效果图

代码结构

// Html结构
<template>
  <div>
    <div class="list">
      <ul>
        <li v-for="(item,index) in title_list" :key="index">
        <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'}"
        @click="jump(index)">
        {{item.title}}
        </span>
        </li>
      </ul>
    </div>
    <div class="result" @scroll="onScroll" >
      <div class="scroll-item"><span>第一</span></div>
      <div class="scroll-item"><span>第二</span></div>
      <div class="scroll-item"><span>第三</span></div>
      <div class="scroll-item"><span>第四</span></div>
    </div>
  </div>
</template>
//功能实现代码
<script>
export default {
  methods:{
    jump(index) {
      var items = document.querySelectorAll(".scroll-item");
      for (var i = 0; i < items.length; i++) {
        if (index === i) {
          items[i].scrollIntoView({
            block: "start",//默认跳转到顶部
            behavior: "smooth"//滚动的速度
          });
        }
      }
    },
    onScroll(e) {
      let scrollItems = document.querySelectorAll(".scroll-item");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.activeStep = i;
          break;
        }
      }
    },    
  },
  data() {
    return {
      activeStep :0,
      title_list:[
        {title:'第一'},
        {title:'第二'},        
        {title:'第三'},
        {title:'第四'},
        ]
    }
  }
}
</script>
//样式
<style>
.list {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  background: pink;
}
ul {
  width: 100%;
  height: 40px;
  line-height: 40px;
  list-style: none;
}
li {
  float: left;
  width: 20%;
  font-size: 30px;
}
li>span {
  cursor:pointer;
}
.result {
  width: 100%;
  height: 500px;
  overflow: scroll;
}
.scroll-item {
  width: 100%;
  height: 500px;
  margin-top:20px;
  background: yellow;
}
.scroll-item>span {
  font-size: 40px;
}
.scroll-item:first-child {
  margin-top: 0;
}
.scroll-item:last-child {
  height: 500px;
}/ * 最后一个元素的最小高度要大于等于父元素的高度,如果scroll-item为高度自适应的话,那么最后一个scroll-item就得设置min-height:100%* /
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应 代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-

  • vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • vue实现锚点跳转及滚动监听的方法

    vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下 *注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后一个元素就滚动不上去, scrollIntoView接口的具体参数说明 实际效果图 代码结构 // Html结构 <template>   <div>     <div class="list">       <ul>         <li v-for="

  • jQuery实现可兼容IE6的滚动监听功能

    本文实例讲述了jQuery实现可兼容IE6的滚动监听功能.分享给大家供大家参考,具体如下: 其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行. 将实现如下的效果: 也就是在网页中有点常见的滚动监听.相应的标题,滚到哪里,则左边的滚动条当前标题前的...就变成>>>,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方. 首先是网页布局部分,代码如下,请忽略大堆的Jav

  • Flutter 滚动监听及实战appBar滚动渐变的实现

    介绍 在 Flutter 中滚动监听一般可以采用两种方式来实现,分别是ScrollController和NotificationListener这两种方式. ScrollController介绍 ScrollController 介绍一下ScrollController常用的属性和方法: offset:可滚动组件当前的滚动位置. jumpTo(double offset)跳转到指定位置,offset为滚动偏移量. animateTo(double offset,@required Duratio

  • jQuery滚动监听实现商城楼梯式导航效果

    话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu

  • 学习Bootstrap滚动监听 附调用方法

    本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下 滚动监听 伴随着滚动条的滚动,列表项被不断切换激活 <!-- id="menu" 为data-target="#menu" 的监听对象--> <!-- navbar navbar-inner nav navbar-fixed-top 固定导航条 --> <div id="menu" class="navbar navbar-fixed-to

随机推荐