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

项目场景:

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


解决方案:

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

uniapp chooseVideo和uploadFile 选择视频或照片上传抖快平台踩坑

先贴代码 uni.chooseVideo({sourceType: [album],fail:(err)>{console.log(TAG, "chooseVideo-failerr:", err)page.resetUploadFileField()if (err.errNo 10200 || chooseVideo:fail take video fail err.errMsg || chooseVideo:fail auth deny err.errMsg) …

排序-插入排序

基本介绍 插入排序属于内部排序算法,是对于排序的元素以插入的方式找寻该元素的适当位置,以达到排序的日的。 插入排序(Insertion Sorting)的基本思想 把n个待排序的元素看成为一个有序表和一个无序表,开始时有序表中只包含一个元素&#xff…

架构设计-如何安全地传输密码

java web 项目中经常会遇到登录或注册的场景,如果查看浏览器的 network 网络请求时,用户的密码以明文方式传输,会造成很多安全隐患,这就涉及到密码如何安全传输的问题。 数据加密的重要性不言而喻,通用的加密技术有 哈希散列、对称加密、非对称加密。 哈希散列 哈希散列是…

论徐州高防IP的作用有哪些?

高防IP是一个专门解决大流量攻击的安全防护产品,能够支持网站和非网站类业务的DDOS防护和CC防护,是保护企业网络安全的重要手段,大部分的企业网站会选择应用高防IP,来保障企业业务的稳定可用性。 接下来小万就来介绍一下高防IP的作…

如何有效限制IP多次重新访问网站

哈喽,大家好呀,淼淼又来和大家见面啦,在如今的网络世界中,有时候我们需要限制某些IP地址多次重新访问网站,以保护网站的安全性和用户体验。这一期淼淼将介绍一些常见的方法,帮助你有效地限制IP多次重新访问…

FPGA Verilog模块化设计入门篇一

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

【npm】一款时间日期工具库,你可以使用它来实现精美日历或欢迎页

时间转换工具 author: Vincamailbox: 237690966qq.comUpdateTime: 2024/6/13 15:29:18 安装 npm install v_datejs引用 import v from "v_datejs";使用 html&#xff1a; <template><code>{{ v.tm() }}</code> </template>js&#xff…

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

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

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

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

Web前端大结局:揭秘四重境界、五大法则、六大技巧与七大未来趋势

Web前端大结局&#xff1a;揭秘四重境界、五大法则、六大技巧与七大未来趋势 在浩瀚无垠的互联网世界中&#xff0c;Web前端技术以其独特的魅力&#xff0c;吸引着无数开发者投身其中。今天&#xff0c;我们将一起揭开Web前端的大结局&#xff0c;深入探讨其四重境界、五大法则…

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

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

MFC四种方法编写多线程

本文以四个demo为例&#xff0c;对MFC的多线程进行学习。学习的过程中写了四个demo&#xff0c;将其做成笔记&#xff0c;发布在csdn上面。 mfc多线程demo1 volatile BOOL m_bRun; CEdit* edit; void ThreadFunc(){CTime time;CString strTime;m_bRun true;while(m_bRun){ti…

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

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

贝壳APP渗透测试WP

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

2分钟用手机开发一个ChatBot

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

.pth文件是可以打开的吗?和.py文件是一样的吗?

#1 .pth文件是可以打开的吗&#xff1f;和.py文件是一样的吗&#xff1f; .pth文件&#xff08;通常是由PyTorch保存的模型权重文件&#xff09;和.py文件是完全不同的类型&#xff1a; pth文件&#xff1a;是二进制文件&#xff0c;保存了训练过程中模型的参数状态。这些文件…

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

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

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

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

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

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