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

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

时间:2024-06-14 11:30:33浏览次数:10  
标签:浏览器 缩放 悬浮 滚动条 div mounted 页面

项目场景:

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


解决方案:

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

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

标签:浏览器,缩放,悬浮,滚动条,div,mounted,页面
From: https://blog.csdn.net/qq_45067263/article/details/139602888

相关文章

  • 如何显示页面底部弹窗
    文章目录1.概念介绍2.使用方法2.1固定样式2.2自定义样式3.示例代码4.内容总结我们在上一章回中介绍了"GetMaterialApp组件"相关的内容,本章回中将介绍使用get显示SnackBar.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在介绍Get包时提到该提供了一......
  • Windows Server 2012 R2部署网站后IIS,只要访问网址应用程序池就自动停止,浏览器页面提
     解决方案:1.查看windows日志通过文件资源管理器查看:打开文件资源管理器,找到“我的电脑”。右键点击“管理”。在弹出的窗口中,点击“事件查看器”。在事件查看器中,点击“Windows日志”即可查看各种日志信息 2.找到错误信息......
  • PyQT5之多页面切换
    fromPyQt5.QtWidgetsimportQApplication,QWidget,QStackedLayout,QVBoxLayoutfromPyQt5.QtWidgetsimportQPushButton,QComboBox,QSizePolicyimportsysif__name__=='__main__':app=QApplication(sys.argv)my_widget=QWidget()my_w......
  • uni-app上下级页面数据双向通信
    前情最近在做小程序项目,选用是当前比较火的uniapp技术栈,经常会遇到页面间消息传递的需求。为什么要这么做?uniapp页面间数据通信方式有很多:通过url传参,状态管理库vuex/pinia,本地存储,事件通道eventChannel,EventBus等。这次的需求是在A面点击一个按钮跳转到B页面拾取一个数据选项......
  • linux内存管理(九)- 页面回收
    参考《深入理解linux内核架构》和这篇博客Linux中的内存回收[一]-知乎(zhihu.com)内核代码v6.8-rc2内存在计算机系统中经常是稀缺资源,当系统中内存不足甚至耗尽,为了让系统继续运行必须回收一部分内存。为了回收内存,我们必须首先知道系统中的内存都处于什么状态。内存中的页......
  • liunx下prometheus页面设置用户名密码登陆
    前言 前两天公司漏洞通报prometheus未设置鉴权,漏洞详情如下图所示。 操作前须知Prometheus于2.24版本(包括2.24)之后提供BasicAuth功能进行加密访问,在浏览器登录UI的时候需要输入用户密码,访问Prometheusapi的时候也需要加上用户密码1、安装依赖yum-yinstallepel-......
  • 【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width
    Chrome在121版本开始,原生支持了两个滚动条样式相关的样式scrollbar-color和scrollbar-width。要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在MDN文档中都明确了不应该在生产环境使用它。MDN-::-webkit-scrollbar......
  • 下载使用nginx发布html自定义页面
    在浏览器搜索nginx.org,然后点击download,接着点击 stableandmainline选择自己所使用系统对应的信息后点击(我用的是CentOS,所以需要点击RHELandderivatives)vim/etc/yum.repos.d/nginx.repo[nginx-stable]name=nginxstablerepobaseurl=http://nginx.org/packages/ce......
  • electron + vue3 自定义窗口:移动,缩放,置顶
    electronmain.jsconst{BrowserWindow,ipcMain}=require('electron');constpath=require("path")constCustomWindow=require('./CustomWindow')constwin=newBrowserWindow({frame:false,transparent:true,......
  • Python 调整PDF页面尺寸大小
    在处理PDF文件时,我们可能会遇到这样的情况:原始PDF文档不符合我们的阅读习惯,或者需要适配不同显示设备等。这时,我们就需要及时调整PDF文档中的页面尺寸,以满足不同应用场景的需求。利用Python语言的高效性和灵活性,再结合Spire.PDFforPython库的强大功能,我们可以通过Python代码轻......