vue控制滚动条滑到某个位置的方法实例

 更新时间:2022年12月08日 15:57:47   作者:付渐渐  
当容器有滚动条时,有时需要将滚动条滑到某个位置,下面这篇文章主要给大家介绍了关于vue控制滚动条滑到某个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一.关于web开发的各种高度的计算介绍

设置当前滑动到的距离

语法一:window.scrollTop(x,y)  传俩个值
//x横坐标 y纵坐标

例:window.scrollTop(0,1000)

语法二:window.scrollTop(options) 传对象,对象里面放属性

  window.scrollTo({
           top:560,
          left:0,
          behavior: "smooth"
        });

// top:纵坐标   left:横坐标

behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

    // 获取html元素
    let htmlDom = document.documentElement;
    // 获取页面高度加内边距
    const deviceHeight = htmlDom.clientHeight;
    //获取当前滚动条的高度
    const scrollHeight=htmlDom.scrollHeight;
    //获取页面高度加内边距加边框
    const offsetHeight=htmlDom.offsetHeight;
    console.log("html--------",htmlDom.offsetHeight);
    console.log("deviceHeight",deviceHeight);
    console.log("scrollHeight",htmlDom.scrollHeight);
    //我的业务里面只用到了这个scrollHeight
    let keepHeight=htmlDom.scrollHeight-90;
    // 如果需要设置某个元素的样式等用ref进行一个绑定 这个例子ref绑定的就是list
    // this.$refs.list.style.height = htmlDom.scrollHeight +"px"
    window.scrollTo({
      top: keepHeight,
      behavior: 'instant'
    })

配个官方图理解:

二.回到页面顶部实现方法  

1.  元素中绑定ref 

 <div ref="returnTop"></div>

  在需要回到顶部的地方加上此代码

   this.$nextTick(() => {
        this.$refs.returnTop.scrollTop = 0
      })

2.   浏览器回到页面顶部 window.scrollTo(0,0),页面滚动

不用多介绍了,上面有。

一个小例子如下:

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

3.使用el-pagination实现翻页自动回到顶部

定义$scrollTo方法挂载在vue全局

// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
    window.scrollTo({
        top: x,
        left: y,
        behavior: type // 滚动行为:smooth平滑滚动,instant瞬间滚动,默认值auto,等同于instant
    })
}
// 使用方法
this.$scrollTo()

三.总计一下今天学到的新知识

(1)watch监听属性变化函数

监听属性的两种写法:

isHot:{
	// immediate:true, //初始化时让handler调用一下
	//handler什么时候调用?当isHot发生改变时。
    //deep:true, //开启深度监视,当属性是个对象时,如需监听对象的属性,需开启深度监视
	  handler(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue)
	}
},
 
//简写
/* isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
} */

watch监听函数实现compted函数相同功能

			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
                   //监听函数可以实现异步方法
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}

(2)computed和watch之间的区别:

1.computed能完成的功能,watch都可以完成。

2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

但是computed进行计算某些值得时候,可以少写一个属性。例如:fullName

补充:vue平滑滚动到指定位置

需求:锚点导航问题,点击导航跳到对应的模块,两种方式

1.滚动盒子滚动到指定高度 scrollTo(offsetTop每个模块顶部距离可滚动盒子的顶部偏移的像素值)

    goAnthor (selector) {
      const height = document.querySelector(selector).offsetTop
      const container = document.querySelector('.scroll-wrap')
      container.scrollTo({
        top: height,
        behavior: 'smooth'
      })
    },

2.滚动元素滚动到滚动盒子的最顶部 scrollIntoView

    goAnthor(selector) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth'
      })
    },

总结

到此这篇关于vue控制滚动条滑到某个位置的文章就介绍到这了,更多相关vue控制滚动条滑到某位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中的 DOM与Diff详情

    Vue中的 DOM与Diff详情

    这篇文章主要介绍了Vue中的 DOM与Diff详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-08-08
  • Vue全局注册与局部注册两种组件注册的方式

    Vue全局注册与局部注册两种组件注册的方式

    本文主要介绍了Vue全局注册与局部注册两种组件注册的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • VeeValidate在vue项目里表单校验应用案例

    VeeValidate在vue项目里表单校验应用案例

    这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例,VeeValidate是Vue.js的验证库,它有很多验证规则,并支持自定义规则,非常具有实用价值,需要的朋友可以参考下
    2018-05-05
  • vue中的attribute和property的具体使用及区别

    vue中的attribute和property的具体使用及区别

    本文主要介绍了vue中的attribute和property的具体使用及区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue-cli3多页面配置详解

    Vue-cli3多页面配置详解

    这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue3+Element-plus项目自动导入报错的解决方案

    Vue3+Element-plus项目自动导入报错的解决方案

    vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于Vue3+Element-plus项目自动导入报错的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue3.0 自适应不同分辨率电脑的操作

    vue3.0 自适应不同分辨率电脑的操作

    这篇文章主要介绍了vue3.0 自适应不同分辨率电脑的操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • vue项目或网页上实现文字转换成语音播放功能

    vue项目或网页上实现文字转换成语音播放功能

    这篇文章主要介绍了在vue项目或网页上实现文字转换成语音,需要的朋友可以参考下
    2020-06-06
  • vue中 数字相加为字串转化为数值的例子

    vue中 数字相加为字串转化为数值的例子

    今天小编就为大家分享一篇vue中 数字相加为字串转化为数值的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue.use源码学习小结

    Vue.use源码学习小结

    这篇文章主要介绍了Vue.use源码学习小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论