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);//我的业务里面只用到了这个scrollHeightlet 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控制滚动条滑到某个位置相关推荐

DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
js是滚动条滑到固定位置_js滚动到指定位置
序言:在网络上百度,关键字:"js div滚动到指定位置",结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单 ...
js是滚动条滑到固定位置_JavaScript 滚动条定位指定位置
当子元素尺寸超过父元素的时候能够出现滚动条. 可能会根据需要将滚动条定位到某处,蚂蚁部落的侧栏导航就具有类似功能. 下面通过代码实例简单演示一下简单定位效果:[HTML] 纯文本查看复制代码运行代码 ...
js设置控制滚动条位置
js设置控制滚动条位置注意:scrollLeft,scrollTop是加在容器上,不是加载滚动的内容上. 使用: scrollLeftOffset: function () {$('.time- ...
vue 设置滚动条的位置
vue 设置滚动条的位置场景:聊天的时候,消息会一条条的发送,但是呢,获取最新的数据只能手动滚动滚动条,那这个时候就想到微信聊天的时候,永远可以看到最后一条消息. 思路:获取div的高度(因为里面是 ...
JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部
S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.bod ...
vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
html滚动条怎么置顶,js控制滚动条到最底端(置底)和最顶端(置顶)
滚动条样式: body { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-CO ...
uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端
uni-app 滑到一定位置固定某个元素在顶部吸顶实例 APP端吸顶完美吸顶方案 uView uniapp组件库 //通过offset-top参数设置组件在吸顶时与顶部的距离 <u-stic ...