vue 解决无法设置滚动位置的问题

2023-05-16

问题描述

在实现锚点定位的时候发现无法设置滚动条的位置。

在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度。

document.body.scrollTop一直是0

原因

因为vue的页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。

页面没有DTD,即没指定DOCTYPE时,使用document.body。

解决方案

document.documentElement=956

 

2018年10月10号新增

上面仅仅是说这个页面的滚动条高度的设定,当我页面内的一个div的滚动条设定他的高度 如下解决方案


var anchor = this.$el.querySelector('.message-list')
      this.$nextTick(() => {
        document.querySelector('.message-list').scrollTop = anchor.scrollHeight
 })  

这个解决方案在我做ng的时候又出现过类似的问题,我前大佬告诉我的 ,当时只是为了解决问题并没有了解其原理,复制进来就过去了。

现在做vue了,才知道哦,为什么要这样写,所以说项目太赶,只是为了完成任务,对个人能力并没有提升,做完了就过了, 还要解决其他的bug,其他的任务,现在能够静下来在工作过程中学习+进步,对个人的发展才是好的。工作不仅仅是工作完成任务,是一个自己发现自身问题,提升能力和对自己的技术实操实践的过程。

 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 解决无法设置滚动位置的问题 的相关文章

随机推荐

  • linux下ssh远程登录服务器入门操作

    使用用户名密码登录 在命令行中输入命令 xff1a ssh username 64 ip address p port 之后系统会提示输入密码 xff0c 输入后即可登录 如果不添加 p选项 xff0c 则默认是22端口 还可以使用 l选项
  • Flutter开发遇坑记录

    问题1 Android Studio flutter 项目运行报错 Launching lib main dart on Android SDK built for x86 in debug mode Initializing gradle
  • 深度剖析CMOS、FinFET、SOI和GaN工艺技术

    真空管的发明是电子工业发展的重要动力 但是 xff0c 在第二次世界大战之后 xff0c 由于需要大量的分立元件 xff0c 设备的复杂性和功耗显着增加 xff0c 而设备的性能却不断下降 xff0c 其中一个例子是波音B 29 xff0c
  • 多线激光雷达与单线激光雷达的区别

    多线激光雷达是指同时发射及接收多束激光的激光旋转测距雷达 xff0c 市场上目前有4线 8线 16 线 32 线 64 线和128线之分 xff0c 多线激光雷达可以识别物体的高度信息并获取周围环境的3D扫描图 xff0c 主要应用于无人驾
  • VSCode + PYQT5 + QtDesigner 环境搭建和测试

    目的 xff1a 编写Python桌面应用程序 备注 xff1a 也可以选择VS2017 43 QtDesigner xff0c 但更喜欢VSCode 第1步 xff1a 安装PyQt5和PyQt5 tools pip3 install i
  • JavaScript 事件委托详解

    基本概念 事件委托 xff0c 通俗地来讲 xff0c 就是把一个元素响应事件 xff08 click focus xff09 的函数委托到另一个元素 xff1b 一般来讲 xff0c 会把一个或者一组元素的事件委托到它的父层或者更外层元素
  • Peoplecode Trace in a File

    Local File amp fle amp fle 61 GetFile GetCwd 34 files Test xml 34 34 W 34 FilePath Absolute amp fle WriteLine 34 Hi 34 a
  • 游标的使用之压缩数据库Log文件

    declare 64 databasename nvarchar 100 定义游标以及赋值 获取所有Online的Database Name declare getDataBaseCursor cursor for select name
  • 13-初识指针

    一 函数的实际运行原理 函数在接受参数的时候 会重新开辟内存来进行计算 二 指针 最牛逼 xff1a 汇编语言 xff1a 都是直接操作地址去访问内存单元里面等内容 C语言作为高级语言 xff1a 提供通过地言 xff1a 都是址去访问内存
  • 从n个元素中选择k个的所有组合(包含重复元素)

    LeetCode Combinations这篇博客中给出了不包含重复元素求组合的5种解法 我们在这些解法的基础上修改以支持包含重复元素的情况 对于这种情况 xff0c 首先肯定要对数组排序 xff0c 以下不再强调 修改算法1 xff1a
  • AFNetworking-RequestSerializer

    概况介绍 xff1a 这篇主要介绍AFNetworking中请求参数序列化的部分 具体代码在AFURLRequestSerialization中 AFURLRequestSerialization包含四部分 AFHTTPRequestSer
  • 使用kotlin遇到的问题

    这是在项目中使用kotlin开发遇见的问题 1 Unresolved reference java 在项目的gradle中 buildscript repositories jcenter maven url 39 https maven
  • 2019《去哪儿》春季校招第一站(含笔试题)

    PS xff1a 点进来的小伙伴 xff0c 我想先声明 xff0c 标题中的去哪儿指的是517Na这家公司 离职已经过去了4天 xff0c 这几天算是过上了悠闲而轻松的日子 瞌睡也睡了 xff08 忘记了早餐存在的价值 xff09 xff
  • [转]Bash中的PS1详解

    10 9日某公司电面提到的bash题目 bash里面的这个提示符前的内容是否可以修改 xff1f 如果可以 xff0c 应该是怎么改 xff08 不需要确切说出修改那里 xff09 当时回答不太确切 xff0c 只是说这个都可以在配置文件里
  • ae怎么设置gpu渲染_PR\AE插件合集包,精选六款超实用插件,一键傻瓜式安装,免费送...

    PRAE插件合集是影视后期处理还是图像处理都是必须用到的工具 xff01 那么小喵给大家一共精选了六款插件 xff0c 免费送给大家 xff01 支持PR xff08 AE xff09 CC2014 CC2019版本 下面给大家简单的介绍一
  • Solidworks 如何绘制投影曲线

    1 画一个半圆 xff0c 然后旋转360 得到一个正圆 2 在视图中任意绘制一条平面曲线 xff08 用样条曲线绘制 xff09 3 退出草图 xff0c 在特征选项卡中点击 34 投影曲线 34 4 将草图2 xff08 一条平面曲线
  • Android Activity加载Fragment的一般简易方法

    Android Activity加载Fragment的一般简易方法 首先写一个布局 xff0c 布局里面以FrameLayout布局为佳 xff0c code lt FrameLayout xmlns android 61 34 http
  • 概率运算中C(k,n)是怎么算的啊? 比如C(6,3)等于几?怎么来的.

    C 6 3 61 6 3 3 61 20 n 61 1 2 3 4 n
  • Python3 ElementTree.tostring()导致标签前辍变为ns0/ns1处理

    一 说明 python中我们经常借助xml etree ElementTree对xml进行处理 xff0c 其中ElementTree fromstring 将字符串格式化成et对象 xff0c ElementTree tostring 将
  • vue 解决无法设置滚动位置的问题

    问题描述 在实现锚点定位的时候发现无法设置滚动条的位置 在Vue中 xff0c 使用 document body scrollTop 61 952 无法设置滚动条的高度 document body scrollTop一直是0 原因 因为vu