zoom缩放导致下拉框定位偏移问题

news2024/12/22 20:11:04

因为浏览器升级修改了zoom导致

https://developer.chrome.google.cn/release-notes/128?hl=zh_tw

在这里插入图片描述

可根据zoom值计算相差偏移量

  const isChromeHighVersion = () => {
    const ua = navigator.userAgent.toLowerCase();
    const chromeIndex = ua.indexOf('chrome');
    if (chromeIndex > -1) {
      const version = ua.substring(chromeIndex + 7);
      const majorVersion = parseInt(version.split('.')[0], 10);
      return majorVersion > 127;
    }
    return false;
  };
  
  function zoomPlugin() {
    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
  
    if(!isChromeHighVersion()){
      return;
    }
  
    Element.prototype.getBoundingClientRect = function () {
      const rect = originalGetBoundingClientRect.call(this);
      const zoom = Number(document.body.style.zoom || 1);
  
      const newRect = new DOMRect(
      	// 可自行修改
        rect.x / zoom + 100,
        rect.y / zoom + 100,
        rect.width / zoom,
        rect.height / zoom,
      );
      return newRect;
    };
  }
  

调用zoomPlugin方法即可

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

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

相关文章

跑步戴的耳机哪个品牌的好?精选五款热门品牌骨传导耳机分享

近年来,骨传导耳机逐渐成为了人们喜爱的耳机之一。相比于传统的耳机,骨传导耳机不需要使用耳塞,就可以让用户在运动时更加自由自在,不受耳机带来的束缚感。然而,市面上的骨传导耳机品牌和型号众多,质量参差…

如何把大的txt文件拆分为小的文件?

命令:split 1. 功能:这个是一个Linux 命令,功能是一个大文件分割成多个较小的文件。 可以使用该命令的系统:在Linux 终端,或者是windows git bash 端口。 官方说明:在Linux 终端,或者是…

【生成模型系列(中级)】词向量维度选择的奥秘——从理论到实验的揭秘【通俗理解,代码模拟】

【通俗理解】词向量维度选择的奥秘——从理论到实验的揭秘 关键词提炼 #词向量 #维度选择 #最小熵原理 #Johnson-Lindenstrauss引理 #注意力机制 #图网络 第一节:词向量维度选择的类比与核心概念【尽可能通俗】 1.1 词向量维度选择的类比 词向量维度选择就像为一…

Git 使用指南 --- 版本管理

序言 Git 是一个开源的 分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。对一个程序员来说,掌握 Git 的使用是必要的。  在这个系列中,将详细的介绍 Git 的使用和原理,话不多说,让我们开始吧。…

C# 加解密之DES

说完了对称加密中的AES,这一篇再来介绍下DES。加解密原理什么的就不介绍了,大家可以自行百度(主要我也不太明白,也不需要太明白),大致说一下两者的区别吧! 首先肯定是加密算法的不同&#xff0…

模型大师们!答应我把这8本书翻烂好嘛?

模型大师们,准备好踏上一段深度学习与模型构建的路了吗? 这里有八本经典之作,它们将是你攀登知识高峰的阶梯! 从《PyTorch深度学习实战》到《大模型时代》 从掌握基础框架到洞悉大模型时代的变革 模型大师,准备好了吗&#xff…

RabbitMQ核心架构

RabbitMQ架构设计 Producer:负责产生消息。 Connection:RabbitMQ客户端和代理服务器之间的TCP连接。 Channel:建立在连接之上的虚拟连接,RabbitMQ操作都是在信道中进行。 Broker:一个Broker可以看做一个RabbitMQ服…

TP5发送邮件功能如何实现?怎么配置服务?

TP5发送邮件性能优化如何优化?怎么使用TP5发送邮件? 在现代Web开发中,TP5框架因其高效和灵活性而广受欢迎。无论是用于用户注册验证、密码重置还是定期通知,TP5发送邮件功能都能提供强大的支持。AokSend将详细介绍如何在TP5框架中…

开放式耳机和骨传导耳机哪个好?2024年开放式耳机排行榜10强

随着耳机市场的不断发展,开放式耳机和骨传导耳机逐渐成为两大热门选择。无论是追求高音质还是重视佩戴舒适度,消费者在选购耳机时都面临着一个重要问题:开放式耳机和骨传导耳机到底哪个更好?今天我们就来深入对比这两种耳机的优缺…

顶会最高分的文章怎么写?基于CNN的时间序列新SOTA就是最好的答案!

【时间序列CNN】(卷积神经网络)在近年来的深度学习领域中备受关注,它通过将卷积神经网络应用于时间序列数据,显著提升了模型在特征提取和模式识别任务中的表现。时间序列CNN技术已经在金融预测、健康监测和工业设备故障检测等多个…

竟然有50万个使用Flutter开发的应用了,这也太牛了!

近期工作比较清闲,在Flutter和React Native两者中犹豫学习哪个,做了不少功课,最终决定入手Flutter。原因很简单,感觉Flutter更有前景,另外B站也找到了适合自己学习的Flutter免费教程,天时地利人和&#xff…

进程的那些事——了解进程(虚拟地址空间)

目录 前言 一、程序地址空间(虚拟地址空间) 二、虚拟地址寻找物理内存 1.页表 总结 前言 提示:这里可以添加本文要记录的大概内容: 程序和进程之间的区别: 进程:对用户而言,进程是运行中的…

写卡片可以成为专家吗?

前一段,一位同学问我: 写小卡片记录巅峰,积少成多就一定能成为行业专家了吗? 我的观点如下: 想成为行业专家,我认为要有两类卡片: 1. 对同行专家知识学习后,所写的卡片。比如&am…

【专项刷题】— 字符串

1、最长公共前缀 - 力扣(LeetCode) 思路: 解法一:两两比较字符串解法二:比较每一个字符串的同一位图解:代码: class Solution {public String longestCommonPrefix(String[] strs) {String ret …

北京精诚博爱医院简介

北京精诚博爱医院位于北京市朝阳区崔各庄乡南皋路188号,地处东北五环外,毗邻首都机场高速,与北京798艺术区和草场地艺术区隔窗相望,交通便捷。是一所以医疗、康复、预防保健为一体综合性医保定点医院。 医院为国家呼吸临床中心医联…

旺店通ERP集成用友NC(用友NC主供应链)

源系统成集云目标系统 用友NC介绍 用友NC是用友NC产品的全新系列,是面向集团企业的世界级高端管理软件。它以“全球化集团管控、行业化解决方案、全程化电子商务、平台化应用集成”的管理业务理念而设计,采用J2EE架构和先进开放的集团级开发平…

基于Java的在线文献检索系统

基于springbootvue实现的在线文献检索系统(源码L文ppt远程调试)4-027 第4章 系统设计 4.1 总体功能设计 一般个人用户和管理者都需要登录才能进入在线文献检索系统,使用者登录时会在后台判断使用的权限类型,包括一般使用者…

C# NX二次开发-获取体全部面

使用 UF_MODL_ask_body_faces 或获取一个体的全部面: 代码: theUf.Modl.AskBodyFaces(body.Tag, out var face_list);face_list.Foreach(x > x.NxListing()); 免责声明: 只用于参考,如果有什么问题不要找我呀。

【Google Play】携程旅行8.71.6最新国际版(如何鉴别是否官方?)

作为业内权威的在线旅游服务公司,携程旅行手机客户端提供中国境内超过11万家酒店和公寓的选择,海外则有超过70万家酒店可供预订。覆盖所有国内航线机票以及大部分主流国际航线,国内火车票全覆盖,长途汽车票则涵盖了500多个城市的2…

Tauri应用开发实践指南(6)— Tauri 主题多语言设置开发

前言 在现代应用开发中,用户界面的主题和多语言支持是提升用户体验的关键因素。本文将介绍如何在Tauri应用中实现窗口主题设置和多语言设置的开发,并提供更多实用的技巧和最佳实践。 我们在上一节中实现了集成本地数据库的操作,现在通过这个能力再实现主题&多…