vue-设置页面滚动高度不生效问题处理
首先,我遇到的问题是 无法保留(B)页面滚动的位置(scrollTop ) 无法赋值?!
黄色框是滚动部分(非最外层)

参考:https://www.csdn.net/tags/OtDakg2sOTA3NDktYmxvZwO0O0OO0O0O.html
看完我以为我写的没毛病,但是我没有使用$nextTick,setTimeout这两个方法,而是直接写里面的内容,造成无法给scrollTop赋值;
beforeRouteEnter(to, from, next) {
next((vm) => {
if (from.name == "ComputerroomDetails") {
vm.scrollIndex = sessionStorage.getItem("ScrollIndexPositionY");
// vm.$el.scrollTop = Number(vm.scrollIndex);//$el这是获取外层元素
// document.getElementsByClassName('content').scrollTop = Number(vm.scrollIndex);//一开始这么写但是无法赋值
// document.querySelector('.content').scrollTop = Number(vm.scrollIndex);//同上
// document.querySelector('.content').scrollTop = 100;
vm.$nextTick(()=>{
setTimeout(()=>{
let content = vm.$el.querySelector('.content') ;
content.scrollTop = vm.scrollIndex; //这是获取到的滚动位置赋值
console.log("scrollTop",content.scrollTop);
},100) })
}
}
) },
差点就放弃这个方法了,看来还是得全套才行。感谢原作者,我就做个小笔记哈!
补充获取滚动位置的方法:
html:
<div class="content" @scroll="scroll"></div> methods:{
// 滚动位置
scroll(event) {
this.scrollIndex = event.target.scrollTop;
console.log('scroll', event.target.scrollTop)
}
}
vue-设置页面滚动高度不生效问题处理的更多相关文章
- vue+vux页面滚动定位(支持上下滑动)
接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...
- iframe子页面控制父页面滚动高度,直接蹦到父页面开头
zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...
- vue设置页面标题
使用vue-wechat-title插件对页面标题进行设置 1.安装模块 命令行窗口中运行npm install vue-wechat-title --save PS.如果程序正在运行,ctrl ...
- 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
需求 最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实 ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue进入页面时不在顶部,检测滚动返回顶部按钮
这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了
我给swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了,哪里出了问题呢? 添加参数 autoplayDisableOnInteraction : false,
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
随机推荐
- 日常开发记录-js的Date对象中的toLocaleDateString()
就是把Date对象的日期部分转换为字符串,并返回结果. 代码示例: console.log(new Date()) // 2023-01-10T05:42:41.926Z console.log(ne ...
- 分布式事务seata
1.事务的4大基本特征. 1)原子性 2)一致性 3)隔离性 4)持久性 2.什么是分布式事务? 本地事务:单服务进程,单数据库资源,同一个连接conn多个事务操作. 分布式事务:多服 ...
- CSP-S T3函数调用
函数是各种编程语言中一项重要的概念,借助函数,我们总可以将复杂的任务分解成一个个相对简单的子任务,直到细化为十分简单的基础操作,从而使代码的组织更加严密.更加有条理.然而,过多的函数调用也会导致额外的 ...
- 【git】3.2git分支-分支的新建与合并
资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E6%96%B0% ...
- NSQ(6)-nsq相关策略
1:nsq的流量控制 RDY 消息中间件的实现无非两种套路,一种让客户端pull,典型的比如kafka便是如此,而另一种则是push,也就是让客户端不需要做任何操作,只需要做好conn便可以源源不断收 ...
- BigDecimal精度等注意事项
1.BigDecimal运算时尽量传入字符串, 反例: BigDecimal num=new BigDecimal(75); num.multiply(new BigDecimal(0.5)).set ...
- 防止react-re-render: Why Suspense and how ?
近期内部项目基础项目依赖升级,之前使用的路由缓存不再适用,需要一个适配方案.而在此过程中react re-render算是困扰了笔者很久.后来通过多方资料查找使用了freeze解决了此问题.本文主要论 ...
- Codeforces Round #766 (Div. 2) - D. Not Adding
GCD + 调和级数 Problem - 1627D - Codeforces 题意 有 \(n\;(1<=n<=10^6)\) 个互不相同的数 \(a[i]\;(1<=a[i]&l ...
- 第一章MySQL架构
1.MySQL架构1.1连接管理与安全性 cpu维护缓存区,存储已就绪的线程,线程驻守在一个cpu上,创建销毁不用重新创建线程.1.2优化与执行 MySQL解析查询进行各种优化包括重写查询.决定表的读 ...
- Hbase 报错hbase Could not start zk requested port of 2181
windows下面 解决: 1. conf/hbase-env.cmd set HBASE_MANAGES_ZK=false 2. 先启动Hbase start-Hbase.cmd 再启动 zoo ...