首先,我遇到的问题是 无法保留(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-设置页面滚动高度不生效问题处理的更多相关文章

  1. vue+vux页面滚动定位(支持上下滑动)

    接上篇文章:https://www.cnblogs.com/ligulalei/p/10622778.html在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚 ...

  2. iframe子页面控制父页面滚动高度,直接蹦到父页面开头

    zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...

  3. vue设置页面标题

    使用vue-wechat-title插件对页面标题进行设置 1.安装模块    命令行窗口中运行npm install vue-wechat-title --save PS.如果程序正在运行,ctrl ...

  4. 关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    需求 最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实 ...

  5. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  6. vue进入页面时不在顶部,检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  7. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了

    我给swiper添加了自动滚动效果,然后用手指划过页面,发现自动滚动效果不生效了,哪里出了问题呢? 添加参数 autoplayDisableOnInteraction : false,

  9. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

随机推荐

  1. csp-s2020 T2 动物园

    题目简述: 共有n个动物,m条要求,每条要求描述了第x位上是1的话,必须购买y饲料,动物园里已有的动物必须的饲料已经购买了,问题是:在不要求增加购买饲料的基础上,还能放进去多少种动物?共有k个二进制, ...

  2. check power supply check cpu top

    lshw -c power power supply mwh https://www.eia.gov/energyexplained/electricity/electricity-in-the-us ...

  3. 几十行代码实现简易版koa~

    application.js const http = require("http")// 洋葱模型 function compose(middleware){ return fu ...

  4. webpack从零开始打造react项目(更新中...)

    创建项目 创建文件夹 webpack-test  使用编辑器打开文件夹,我们初始化管理包 npm init -y 生成一个默认的 pageage.json 文件 要想创建react项目,思考我们之前使 ...

  5. npm run serve 报错问题 (npm ERR! code ELIFECYCLE)

    运行 npm cache clean --force删除 node_modules删除 package-lock.json运行 npm install最后 npm run serve

  6. spring security 从零开始搭建

    1.引入 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...

  7. 维纳攻击 wiener attack

    维纳攻击 wiener attack 目录 维纳攻击 wiener attack 攻击条件 使用原理 十三届全国大学生网络安全竞赛 bd 分析 解答 [羊城杯 2020]rrrrrsa (wiener ...

  8. docker打包nginx

    nginx镜像  localtime为/etc/localtime文件 给容器限定日志打印时间为北京时间 FROM nginx:stable-alpine MAINTAINER geyanan gey ...

  9. vue的表单

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: <!DOCTYPE ht ...

  10. 苹果电脑快捷键使用 Mac快捷键大全详细介绍

    相信有很多刚开始使用苹果电脑操作系统的用户,都并不了解整个MAC操作系统,就连一般快捷键的使用都不清楚,这让人很感觉很苦恼.分享一下Mac快捷键大全的详细介绍,记住这些常用的快捷键,是你熟悉苹果电脑的 ...