Vue滚动页面到指定位置的实现及避坑

目录
  • Vue滚动页面到指定位置
    • 方法1
    • 方法2
    • 方法3
    • 避坑指南
  • 滚动页面到一定距离后固定

Vue滚动页面到指定位置

在Vue中，有三种方式可以实现H5页面滑动至指定位置

方法1

//先获取目标位置距离
mounted() {
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('targetbox');
        this.target= targetbox.offsetTop;        
   })
  })
}
//再滑动指定距离
document.body.scrollTop = this.target;

方法2

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
})

方法3

document.getElementById("target").scrollIntoView();

避坑指南

方法1，滑动至的元素不能是display:none，存在兼容问题，亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2，未亲测过，但在this.$nextTick(()里执行滑动，感觉有点麻烦。

方法3，亲测可用，ios和android都可。只是要注意，如果页面有监听scroll事件，scrollIntoView也会触发scroll事件的。

滚动页面到一定距离后固定

1.id名为testNavBar的盒子与:class=’{ fixedNavbar: isfixTab }'的盒子可以是包含关系也可以是并列关系

 <div id='testNavBar'></div>
      <div class="container "  :class='{ fixedNavbar: isfixTab  }'>
   </div>

或者

<div id='testNavBar'>
    <div :class='{ fixedNavbar: isfixTab }'>这是导航</div>
</div>

2.fixedNavbar是类名

.fixedNavbar {
      background-color: #f3f3f3;
      position: fixed;
      width: 100%;
      z-index: 2032;
      top: 0;
      left: 0;
      padding-bottom: 10px;
    }

3.isfixTab 是控制是否加类名

 data() {
    return {
      isnavshow: false,
      cateList:[],
      cateInfo:[],
      config_list:{},
      isfixTab:false
    }
  },

4.在mounted中监听页面滚动事件,并调用handleTabFix() 方法

  // 监听页面滚动
    mounted () {
        window.addEventListener('scroll', this.handleTabFix, true)
    },
    //离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
    beforeRouteLeave (to, from, next) {
      window.removeEventListener('scroll', this.handleTabFix, true)
      next()
    },

5.声明一个方法handleTabFix()

 // 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
        // 比较他们的大小来确定是否添加fixedNavbar样式
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#testNavBar').offsetTop
      scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
    }

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

赞 (0)

相关推荐

  • 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    实现目标 浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路 主要的解决要点如下: 如何实现数字动画的效果 如何监听滚动条到指定的位置 分解要点寻找解决思路: 一.如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.

  • vue实现滚动条到顶部或者到指定位置

    vue实现滚动条到顶部或者到指定位置

    目录 vue滚动条到顶部或到指定位置 vue设置滚动条 vue如何在div中设置滚动条呢? vue滚动条到顶部或到指定位置 首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了 , 然后 根据 属性名找到则个元素就可以操作啦 vue设置滚动条 vue如何在div中设置滚动条呢? 首先需要写一下css样式 <div     :style="{'max-height': this.timeLineHeight + 'px' }"     sty

  • Vue引入jquery实现平滑滚动到指定位置

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵...根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话...我还是继续研究

  • Vue列表如何实现滚动到指定位置样式改变效果

    这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式. 查询之后是这个子: 嗯,我的思路: 在搜索框搜索到用户之后会返回一个用户对象,之后会调用列表的点击事件,改变CSS样式及做一些聊天的逻辑.然后需要获取到列表对应的id值,直接使用 document.getElementById(it).scrollIntoView(); 具体实现: 列表:使用vue的v-

  • Vue滚动页面到指定位置的实现及避坑

    目录 Vue滚动页面到指定位置 方法1 方法2 方法3 避坑指南 滚动页面到一定距离后固定 Vue滚动页面到指定位置 在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1 //先获取目标位置距离 mounted() {   this.$nextTick(() => {      setTimeout(() => {         let targetbox= document.getElementById('targetbox');         this.target= targ

  • 不用锚点也可以平滑滚动到页面的指定位置实现代码

    不用锚点也可以平滑滚动到页面的指定位置 复制代码 代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=

  • layui问题之自动滚动二级iframe页面到指定位置的方法

    一.问题 前提:用的layui框架 目标:改变iframe页面滚动条位置 问题:没有麻溜溜的滚.. 二.经过 刚开始,以为只要滚动iframe里面的元素就行了,页面所有元素都在section里面,就通过section使滚动条滚动 $('section.layui-larry-box').scrollTop(300); 可想而知,不行 然后,又试了div啥的 最后直接试了包含这个页面的iframe标签,让iframe滚动 $(this).children('iframe').scrollTop(3

  • Angular 利用路由跳转到指定页面的指定位置方法

    之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,

  • jQuery实现平滑滚动页面到指定锚点链接的方法

    本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S

  • python中的selenium实现自动向下滚动页面并指定最大滑动距离

    需要selenium控制的chrome向下滑动,自动加载一些内容,核心代码是: browser.execute_script("window.scrollBy(0,300)") 这行可以向下滑动300个像素 需要的工具函数如下: def roll_window_to_bottom(browser, stop_length=None, step_length=500):     """selenium 滚动当前页面,向下滑     :param browse

  • js，jquery滚动/跳转页面到指定位置的实现思路

    要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

  • 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）

    比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par

随机推荐