当前位置: 首页 > news >正文

解决浏览器缩放的时候,重新设置滚动条的位置,使页面滚动条固定悬浮在页面底部

项目场景:

浏览器调试页面兼容页面时,缩放页面宽度,整体超出时滚动条出现在页面最底部,不是悬浮在页面下面,只有滚动到最底部才出现,需要的是悬浮在页面底部,不是滚动到最下面才出现


解决方案:

在引入页面组件或者最外部div,添加类名
然后在mounted的时候监听resize

methods: {setScrollBar() {this.$nextTick(function () {var div = document.querySelector(".overall");div.style.height = window.innerHeight - 10 + "px";console.log("mounted: ", div);console.log("mounted: ", window.innerHeight);});},},mounted: function () {this.setScrollBar();// 浏览器缩放window.addEventListener("resize", this.setScrollBar);},

这样就实现了,缩放浏览器时,滚动轴一直固定悬浮在页面底部拖动
在这里插入图片描述

相关文章:

  • 尝试用 GPT-4o 写 2024高考语文作文
  • Unity射击游戏开发教程:(27)创建带有百分比的状态栏
  • 课设--学生成绩管理系统
  • Echats-wordcloud 文字云图的踩坑点【Unknown series wordCloud】
  • C# —— 字符串拼接
  • DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门
  • 【线性代数】向量空间,子空间,向量空间的基和维数
  • 在Linux系统中,使用OpenSSL生成CSR(Certificate Signing Request),并同时生成PEM格式的公钥和私钥的命令如下:
  • 机器视觉:光源的类型以及主要参数
  • 设置 OAuth2 访问令牌的签发时间 (issuedAt) 和过期时间 (expiresAt)
  • 前端面试项目细节重难点(已工作|做分享)(九)
  • Eureka到Nacos迁移实战:解决配置冲突与启动异常
  • Superset二次开发之查询GitHub不同版本修改的文件列表 (Python 方案)
  • srchref,fetchajax,cookiesession
  • 机器学习之数学基础 时间复杂度和空间复杂度
  • 分享的文章《人生如棋》
  • $translatePartialLoader加载失败及解决方式
  • 「面试题」如何实现一个圣杯布局?
  • Android单元测试 - 几个重要问题
  • C++类的相互关联
  • Centos6.8 使用rpm安装mysql5.7
  • es6--symbol
  • HTTP 简介
  • JAVA多线程机制解析-volatilesynchronized
  • Leetcode 27 Remove Element
  • Map集合、散列表、红黑树介绍
  • MySQL主从复制读写分离及奇怪的问题
  • spring + angular 实现导出excel
  • 分享几个不错的工具
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 算法之不定期更新(一)(2018-04-12)
  • 微信开源mars源码分析1—上层samples分析
  • 学习JavaScript数据结构与算法 — 树
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • PostgreSQL之连接数修改
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​Python 3 新特性:类型注解
  • ​ubuntu下安装kvm虚拟机
  • # Redis 入门到精通(一)数据类型(4)
  • (+4)2.2UML建模图
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (day18) leetcode 204.计数质数
  • (苍穹外卖)day03菜品管理
  • (九)信息融合方式简介
  • (六)vue-router+UI组件库
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (十二)python网络爬虫(理论+实战)——实战:使用BeautfulSoup解析baidu热搜新闻数据
  • (一)u-boot-nand.bin的下载
  • (转) Face-Resources
  • .net core 外观者设计模式 实现,多种支付选择
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .net 调用海康SDK以及常见的坑解释