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 所说的吸顶效果就是在页面没有滑动之 ... 
随机推荐
- ORM框架的延迟加载(懒加载)
			Hibernate的延迟加载分类的延迟加载和集合的延迟加载,类的延迟加载又分调用session的load()方法的延迟加载和加载实体单向关联的另一个实体的延迟加载 1.修改配置文件 spring.jp ... 
- SQL 查找是否”存在”,别再用 COUNT 了,真的很费时间!
			根据某一条件从数据库表中查询 『有』与『没有』,只有两种状态,那为什么在写SQL的时候,还要SELECT count(*) 呢?无论是刚入道的程序员新星,还是精湛沙场多年的程序员老手,都是一如既往的c ... 
- 记D365开发的最佳实践
			前端JS 不同的需求应该划分模块,以便日后修改,也是为了职责分离,模块分离,日后如果想分离到单独的JS文件里面也是比较方便: 对于公共的查询函数,应该做缓存,优先使用sessionStorage. 多 ... 
- JiaoZiVideoPlayer模拟用户点击,切换播放引擎!~
			默认播放及模拟用户点击播放按钮 jzvideoPlayerStandard.startButton.performClick() 切换播放引擎及使用Ijkplayer JZVideoPlayer.se ... 
- nacos原理
			配置中心原理 1.Nacos 客户端使用长轮询请求客户端变更数据,并且设置30s超时,当配置发生变化响应会立即返回,否则一直等到29.5s之后再返回响应. 2.客户端的请求到达服务端后,服务端将该请求 ... 
- 如何修改vagrant系统的root用户密码
			1. 先使用vagrant 用户登录. 2. $sudo passwd root #按照提示输入两次新的密码,并加以确认. 然后就可以修改root用户密码 
- java8 检查
			// 检查放款日期 boolean allMatch = cdiscountMonthBillDetails.stream().map(CdiscountMonthBillDetail::getTra ... 
- stm32  flash/sram 映射关系
			1.可以参考手册里关于Memory map的说明, 里面说明了Flash的起始地址与大小, SRAM起始地址与大小 
- 利用Canal投递MySQL Binlog到Kafka
			https://www.aboutyun.com/thread-27654-1-1.html https://www.cnblogs.com/bigdatalearnshare/p/13832709. ... 
- Java方法之方法的重载
			方法的重载 重载就是在一个类中,有相同的函数名称,但形参不同的函数. 方法的重载的规则: 1.方法名称必须相同. 2.参数列表必须不同(个数不同.或类型不同.参数排列顺序不同等). 3.方法的返回类型 ... 
