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

news2025/3/3 18:13:25

项目场景:

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


解决方案:

在引入页面组件或者最外部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);
  },

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1822900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二维数组的遍历

旋转图像 class Solution {public void rotate(int[][] matrix) {for(int i0;i<matrix.length;i){for(int ji1;j<matrix[0].length;j){int tempmatrix[i][j];matrix[i][j]matrix[j][i];matrix[j][i]temp;}}for(int[] arr:matrix){reverse(arr);}}void reverse(int[] arr)…

Ant-design-vue开源项目介绍、应用场景、组件有哪些

文章目录 一、Ant-design-vue项目介绍二、Ant-design-vue项目特点三、Ant-design-vue应用场景四、Ant-design-vue有哪些组件五、Ant-design-vue案例代码1. 后台管理系统登录页面的例子2. Table组件使用案例 开源项目地址 一、Ant-design-vue项目介绍 Ant-design-vue 是一个基于…

java面试题:springMVC的执行流程

请求到达前端控制器DispatcherServlet&#xff0c;该组件是SpringMVC的核心组件&#xff0c;负责接收所有的请求。 DispatcherServlet根据请求中的URL和HandlerMapping找到对应的Controller对象&#xff0c;HandlerMapping是一个接口&#xff0c;定义了请求的URL和对应的Contro…

刺客信条找不到emp.dll怎么解决?emp.dll缺失的解决方法解析

emp.dll 是一个动态链接库文件&#xff0c;它在Windows操作系统中扮演着重要的角色。这个文件包含了多个函数和接口&#xff0c;允许其他程序调用这些功能来实现对多媒体设备的控制和管理。根据搜索结果&#xff0c;emp.dll 主要负责以下功能&#xff1a; 多媒体设备管理&…

进阶篇03——SQL优化

insert 优化 主键优化 不好做笔记&#xff0c;但是挺重要的&#xff0c;留个视频链接&#xff1a;主键优化 order by 优化 视频链接&#xff1a;order by 优化 group by 优化 放视频&#xff08;好吧&#xff0c;这篇文章感觉还是看视频容易懂一点&#xff09;&#xff1a;…

一文了解JVM(中)

HotSpot 虚拟机对象探秘 对象的创建 Header解释使用 new 关键字调用了构造函数使用 Class 的 newInstance 方法调用了构造函数使用 Constructor 类的newInstance 方法调用了构造函数使用 clone 方法没有调用构造函数使用反序列化没有调用构造函数说到对象的创建,首先让我们看…

45.Python-web框架-Django - 开始建立第一个项目

目录 1.django是什么&#xff1f; 2.Pycharm 社区版&#xff0c;还是专业版&#xff1f; 3.开始django&#xff0c;Pycharm专业版 创建一个Django项目 运行一个Django项目 运行方法一&#xff0c;命令行的方式 运行方法二&#xff0c;配置Django Server的方式 4.django尊…

编译原理:语法分析之LR分析

自底向上分析方法&#xff08;LR分析算法&#xff09;bottom-up parsing 引言. 运算符 LR(0)LR(0)的项&#xff08;构建有穷自动机的状态&#xff09;LR(0)的项目闭包&#xff08;构建有穷自动机的状态&#xff09;GOTO函数有效项目LR(0)有穷自动机的构建 SLRLR(1)LALR 引言 L…

树莓派4B学习笔记7:(Python)_TTL串口收发数据_

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 今日尝试使用树莓派的TTL串口进行收发数据&#xff1a; …

Web应用安全测试-业务功能滥用(二)

Web应用安全测试-业务功能滥用&#xff08;二&#xff09; 7、未验证的URL跳转 漏洞描述&#xff1a;服务端未对传入的跳转url变量进行检查和控制&#xff0c;可能导致可恶意构造任意一个恶意地址&#xff0c;诱导用户跳转到恶意网站。由于是从可信的站点跳转出去的&#xff…

无线MODBUS通讯模块在供水系统中的应用

一、项目背景 我国是人口大国、农业大国&#xff0c;同时也是贫水大国。由于大量工业废水污染了部分河流、地表的浅层水资源&#xff0c;并且有逐年加重的趋势&#xff0c;再加上农业、绿化等灌溉对水资源的大量消耗&#xff0c;这些因素综合作用进一步加剧了我国水资源紧缺的…

计算机网络:网络层 - IPv6

计算机网络&#xff1a;网络层 - IPv6 IPv6 数据报IPv6 地址冒号十六进制记法地址分类 IPv4 到 IPv6 过渡双栈协议隧道技术 IPv6 是互联网协议的最新版本&#xff0c;它被设计用来取代现有的 IPv4 协议。这是因为 IPv4 存在一些根本性的限制&#xff0c;而 IPv6 则可以解决这些…

Burp Suite使用及BruteForc_test靶场实战

简介 Burp Suite是用于攻击和测试Web应用程序安全性的集成平台&#xff0c;包含多个协同工作的工具&#xff0c;支持信息共享与复杂攻击。设计有加速攻击流程的接口&#xff0c;所有工具共享强大框架&#xff0c;处理HTTP消息、持久性、认证、代理、日志和警报。主要用于安全性…

【数据结构】【版本1.1】【线性时代】——单链表

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、顺序表的问题二、链表的概念三、单链表的模拟实现3.1 定义3.2 打印3.3 创建新节点3.4 头插3.5 尾插3…

2-3 基于matlab的NSCT-PCNN融合和创新算法(NSCT-ML-PCNN )图像融合

基于matlab的NSCT-PCNN融合和创新算法&#xff08;NSCT-ML-PCNN &#xff09;图像融合。NSSCTest.m文件&#xff1a;用于查看利用NSSC算法分解出的图像并保存。其中的nlevel可调test.m文件&#xff1a;用于产生融合结果&#xff0c;其中一个参数需要设置&#xff1a;Low_Coeffs…

DTU在城市智慧供热上的应用:引领供热行业的智能化革新

随着城市化的快速推进和人们对舒适生活需求的日益增长&#xff0c;供热系统作为城市基础设施的重要组成部分&#xff0c;其智能化、高效化的发展已成为必然趋势。在这一进程中&#xff0c;DTU&#xff08;Data Transfer Unit&#xff0c;数据传输单元&#xff09;以其独特的优势…

Java 反射机制 -- Java 语言反射的概述、核心类与高级应用

大家好,我是栗筝i,这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 010 篇文章,在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验,并希望进一步完善自己对整个 Java 技术体系来充实自…

113.网络游戏逆向分析与漏洞攻防-邮件系统数据分析-结构体数据更新思路分析

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

12_YouOnlyLookOnce(YOLOv3)新一代实时目标检测技术

1.1 回顾V1和V2 V1&#xff1a;05_YouOnlyLookOnce(YOLOV1)目标检测领域的革命性突破-CSDN博客 V2&#xff1a;07_YouOnlyLookOnce(YOLOv2)Better&#xff0c;Faster&#xff0c;Stronger-CSDN博客 1.2 简介 YOLOv3&#xff08;You Only Look Once version 3&#xff09;是…

【因果推断python】33_合成控制3

目录 不要外推 不要外推 假设您有下表中的数据&#xff0c;并被要求构建一个合成控制&#xff0c;以使用控制单元的任何线性组合来重现处理过的单元。 由于有 3 个单位和只有 2 个属性要匹配&#xff0c;因此有多个确定性的解决方案可以解决这个问题&#xff0c;但一个不错的解…