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

项目场景:

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


解决方案:

在引入页面组件或者最外部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.mzph.cn/diannao/27306.shtml

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

相关文章

java面试整合全套

什么是Java (定义 优点) java是一个平台,由jvm和Java应用编程接口构成的一门面向编程语言。 不仅吸收了C语言的各种优点,还摒弃了c语言里面的多继承,指针等概念,因此java的特征主要有功能强大和简单易用的特征。 jav…

FPGA Verilog模块化设计入门篇一

随着电子技术的快速发展,现场可编程门阵列(FPGA)已成为现代电子系统设计中不可或缺的一部分。FPGA的灵活性、可重构性和高性能使得它成为处理复杂算法、加速数据处理和实现特定功能的理想选择。然而,随着系统复杂性的增加&#xf…

go-zero整合Excelize并实现Excel导入导出

go-zero整合Excelize并实现Excel导入导出 本教程基于go-zero微服务入门教程,项目工程结构同上一个教程。 本教程主要实现go-zero框架整合Excelize,并暴露接口实现Excel模板下载、Excel导入、Excel导出。 go-zero微服务入门教程:https://blo…

Mysql学习(九)——存储引擎

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 七、存储引擎7.1 MySQL体系结构7.2 存储引擎简介7.3 存储引擎特点7.4 存储引擎选择7.5 总结 七、存储引擎 7.1 MySQL体系结构 连接层:最上层是一些客户…

自然语言处理领域的重大挑战:解码器 Transformer 的局限性

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

聚焦赛宁网安竞赛平台+赛事服务,引领网络安全竞赛新潮流

第八届XCTF总决赛将在2024年6月22日于中国成都震撼开启,本届总决赛分为个人Live Solo和团队KOH巅峰对决两个赛道,从个人和团队多角度全方位考察参赛人员的竞技水平。 巅峰对决 智慧的火花在此碰撞 个人Live Solo赛制 Live Solo赛分为晋级赛和Solo赛。…

贝壳APP渗透测试WP

前期配置 环境说明 使用PIXEL 4手机,为Android 12系统 APP名为贝壳找房,包名com.lianjia.beike,版本号3.01.10,截至2024/05/07为最新版,小米应用市场下载 绕过反Frida机制 可以参考往期推送,《绕过最新…

2分钟用手机开发一个ChatBot

前言: 在上一期,我们测评了CodeFlying,用它开发出了一个复杂推文管理系统,然后体验了一下它的热门应用:AI智能机器人。今天咱就继续用CodeFlying来开发一个属于我们自己的聊天机器人。 老规矩,我们先在手机…

【qt】平面CAD(计算机辅助设计 )项目 上

CAD 一.前言二.界面设计三.提升类四.接受槽函数五.实现图形action1.矩形2.椭圆3.圆形4.三角形5.梯形6.直线7.文本 六.总结 一.前言 用我们上节课刚刚学过的GraphicsView架构来绘制一个可以交互的CAD项目! 效果图: 二.界面设计 添加2个工具栏 需要蔬菜的dd我! 添加action: …

遗传算法求解车间调度问题(附python代码)

背景介绍 车间调度问题(Job Shop Scheduling Problem, JSSP)是一类经典的组合优化问题,它在制造业和生产管理中有着广泛的应用。JSSP 的目标是对车间中的一系列作业进行排程,以使得作业在不同机器上的加工顺序是最优的&#xff0…

万相台的功能是什么?如何使用万相台?

1.特点: 万相台是一个智能渠道,可控性弱,高转化,人群&关键词是黑盒; 2.场景多: 有拉新快、活动加速、上新快、货品加速、活动加速、多目标直投、全站推等; 3.扣费逻辑:cpc付…

Sm4【国密4加密解密】

当我们开发金融、国企、政府信息系统时,不仅要符合网络安全的等保二级、等保三级,还要求符合国密的安全要求,等保测评已经实行很久了,而国密测评近两年才刚开始。那什么是密码/国密?什么是密评?本文就关于密…

Linux:线程概念 线程控制

Linux:线程概念 & 线程控制 线程概念轻量级进程 LWP页表 线程控制POSIX 线程库 - ptherad线程创建pthread_createpthread_self 线程退出pthread_exitpthread_cancelpthread_joinpthread_detach 线程架构线程与地址空间线程与pthread动态库 线程的优缺点 线程概念…

机器学习与数据挖掘知识点总结(二)分类算法

目录 1、什么是数据挖掘 2、为什么要有数据挖掘 3、数据挖掘用在分类任务中的算法 朴素贝叶斯算法 svm支持向量机算法 PCA主成分分析算法 k-means算法 决策树 1、什么是数据挖掘 数据挖掘是从大量数据中发现隐藏在其中的模式、关系和规律的过程。它利用统计学、机器学…

14.shell awk数组

awk数组 awk数组awk数组示例Nginx日志分析 awk数组 1.什么是awk数组 数组其实也算是变量,传统的变量只能存储一个值,但数组可以存储多个值 2.awk数组应用场景 通常用来统计、比如:统计网站访问TOP10、网站url访问TOP10等等 3.awk数组统计技巧 1.在awk中,使用数组时,不仅可以…

Interview preparation--RabbitMQ

AMQP AMQP(Advanced Message Queueing protocol). 高级消息队列协议,是进程之间床底一步新消息的网络协议AMQP工作原理如下: 发布者(Publisher)发布消息(Message)经过交换机(Exchange&#xff…

新视窗新一代物业管理系统 GetCertificateInfoByStudentId SQL注入漏洞复现

0x01 产品简介 新视窗物业管理系统属于专家型的物业管理软件,能够给物业公司内部管理提供全面的解决方案,具有房产管理、客户管理、租赁管理、仪表管理、财务收费、发票管理、合同管理、仓储管理、设施设备管理、客户服务管理、会员管理、人事管理、资产管理、日常办公、档案…

HTML+CSS 动态卡片

效果演示 实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹&#xff0c;同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时&#xff0c;卡片的图片会放大&#xff0c;并且卡片的背景会变为彩色。 Code HTML <!DOCTYPE html&…

简单聊一下Oracle,MySQL,postgresql三种锁表的机制,行锁和表锁

MySQL&#xff1a; MySQL使用行级锁定和表级锁定。行级锁定允许多个会话同时写入表&#xff0c;适用于多用户、高并发和OLTP应用。表级锁定只允许一个会话一次更新表&#xff0c;适用于只读、主要读取或单用户应用。 比如mysql开启一个窗口执行 begin; update xc_county_a…

【STM32】飞控设计

【一些入门知识】 1.飞行原理 【垂直运动】 当 mg&#xff1e;F1F2F3F4&#xff0c;此时做下降加速飞行 当 mg&#xff1c;F1F2F3F4&#xff0c;此时做升高加速飞行 当 mgF1F2F3F4 &#xff0c;此时垂直上保持匀速飞行。 【偏航飞行】 ω 4 ω 2 ≠ ω 1 ω 3 就会产生水…