vue中如何实现锚点定位平滑滚动

目录
  • vue锚点定位平滑滚动
  • vue点击tabs平滑滚动(锚点事件)
    • 定义
    • 兼容
    • 使用

vue锚点定位平滑滚动

下面是简单的代码，拿来即用

html

//给div盒子设定单击事件和ref名
<div @click="getThere" ref="cat_box">点击滑动到此位置</div>
methods: {
 getThere() {
      // 通过ref名获取元素在页面中的位置并滚动至此
      this.$el.querySelector(".cat_box")
      .scrollIntoView({ block: "start", behavior: "smooth" });  
    },
}

vue点击tabs平滑滚动(锚点事件)

避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。

定义

scrollTo(xpos,ypos),包含两个必须属性

  • xpos（指定滚动到X轴指定位置）
  • ypos（指定滚动到X轴指定位置）

使用：

// 滚动到指定位置window.scrollTo(100,500)

scrollTo(options)，包含三个必须属性

  • top (y-coord) 相当于y轴指定位置
  • left (x-coord) 相当于x轴指定位置
  • behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto

使用：

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

兼容

适用于pc端和移动端，scrollTo（options）属性不兼容 IE

使用

// vue中使用
// 标题
<div
   class="tabs"
   v-for="(item, index) in titAll"
   :key="index"
   :class="{ actives: isactive === index }"
   @click="tabsColor(index)"
>
     {{ item }}
</div>
// 分类tit
<div>
  <div class="item" id="tabs0">资产账户</div>
  // <div>分类内容</div>
  <div class="item" id="tabs1">信贷服务</div>
  // <div>分类内容</div>
  <div class="item" id="tabs2">金融服务</div>
  // <div>分类内容</div>
</div>
 data() {
   return {
     titAll: ["资产账户", "信贷金融", "经融服务"],
     //初始选中
     isactive: 0,
   };
 },
 methods: {
  tabsColor(index) {
  	// 切换选中样式
    this.isactive = index;
    // 获取对应iddom
    const tabsId = document.querySelector(`#tabs${index}`);
    // 判断进行平滑滚动
    if (tabsId) {
      window.scrollTo({
        top: tabsId.offsetTop,
        behavior: "smooth",
      });
    }
  },
},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

  • vue模态框实现动态锚点

    vue模态框实现动态锚点

    本文实例为大家分享了vue模态框实现动态锚点的具体代码,供大家参考,具体内容如下 参考:vue中实现锚点跳转及滚动监听的简便方法 效果图: 代码: // html代码 <template>   <div id="app">     <el-dialog         class="abow_dialog"         title="增加内容"         :visible.sync="Dialog

  • vue中的锚点定位问题

    vue中的锚点定位问题

    目录 vue锚点定位 锚点定位与平滑滚动反定位支持 锚点定位bug无效和替代方式 在vue项目中定义一个方法不适用锚点定位 vue锚点定位 锚点定位与平滑滚动反定位支持 代码如下 html <div style="display: flex;height: 442px;">                        <el-tabs v-model="activeTabs" class="zxtabsStyle" tab-p

  • vue+element ui实现锚点定位

    本文实例为大家分享了vue + element ui 实现锚点定位的具体代码,供大家参考,具体内容如下 vue <el-row :gutter="20"> <el-col :span="3"> <!--导航选择事件--> <el-menu :default-active="activeStep" @select="jump"> <el-menu-item v-for=&qu

  • vue实现锚点定位功能

    vue实现锚点定位功能

    本文实例为大家分享了vue实现锚点定位的具体代码,供大家参考,具体内容如下 这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTop Firefox: document.documentElement.scrollTop Safari: window.pageYOffset 我这里是局部元素滚动,因此稍有差异.先附上html及css代码块: scrol

  • vue中如何实现锚点定位平滑滚动

    vue中如何实现锚点定位平滑滚动

    目录 vue锚点定位平滑滚动 vue点击tabs平滑滚动(锚点事件) 定义 兼容 使用 vue锚点定位平滑滚动 下面是简单的代码,拿来即用 html //给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box">点击滑动到此位置</div> methods: {  getThere() {       // 通过ref名获取元素在页面中的位置并滚动至此       this.$el.quer

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • Vue中div contenteditable 的光标定位方法

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: 基于vue的无缝滚动组件 注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 参考配置: 向下滚动 direction:0 向下滚动 direction:1 向左滚动 direction:2 向右滚

  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

  • vue项目中锚点定位替代方式

    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 以上这篇vue项目中锚点定位替代方式就是小编

  • vue滑动吸顶及锚点定位的示例代码

    在上篇文章给大家介绍了vue实现吸顶.锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm 今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示: Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id='menu'> <ul> <li v-for=&q

随机推荐