iframe隐藏scrollbar并且还能够继续滚动

查了好久的文档,太累了,目前暂时使用了直接把scrollbar隐藏的策略。太难了。

直接隐藏的策略:
frame 有个属性 scrolling,直接设置 scrolling=‘no’ 即可隐藏scrollbar。

<iframe src="xxx" scrolling="no"></iframe>

另外一个就是外边包一层比iframe窄的div,然后 overflow 设置成隐藏。

<div class="iframe-content"><iframe src="xxx"></iframe>
</div><style scoped>
.iframe-content {position: relative;overflow: hidden;width: 1200px;height: 600px;
}.iframe-content iframe {width: 1200px;height: 600px;border: none;position: absolute; right: -15px; top: 0; bottom: 0;overflow-x: hidden; overflow-y: scroll;
}
</style>

不过感觉有可能谁闲的设置过scrollbar的宽度怎么办呢,那就把这个值改成获取的吧。

<div :style="`width:${fwidth-scrollbarWidth-1}px;height:${fheight}px;`" class="overflow-hidden"><iframe :style="`width:${fwidth}px;height:${fheight}px;`":src="xxx"></iframe>
</div>
scrollbarWidth.value = inner.contentWindow.innerWidth - inner.contentWindow.document.documentElement.clientWidth

以下是全部代码,基于vue+tailwindcss

<template><div :style="`width:${fwidth-scrollbarWidth-1}px;height:${fheight}px;`" class="overflow-hidden"><iframe id="xxxxframe"src="http://localhost:5173/":style="`width:${fwidth}px;height:${fheight}px;`"class="border-none overflow-x-hidden overflow-y-scroll shadow"></iframe></div>
</template>
<script setup lang="ts">
import { Ref, onMounted, ref } from 'vue';const fwidth: Ref<number> = ref(1200)
const fheight: Ref<number> = ref(600)
const scrollbarWidth: Ref<number> = ref(0)onMounted(() => {console.log('content scripts onMounted')let inner = document.getElementById('xxxxframe') as HTMLIFrameElementinner.onload = () => {scrollbarWidth.value = inner.contentWindow.innerWidth - inner.contentWindow.document.documentElement.clientWidth}
})
</script>

目前感觉这个办法还算是效果比较好。

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

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

相关文章

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月3日,星期五

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月3日 星期五 农历三月廿五 1、 气象台&#xff1a;我国南方地区3至5日将出现新一轮较强降水&#xff0c;局地有大暴雨。 2、 广东11地市打破4月雨量历史记录&#xff1a;梅州平均雨量为常年3.5倍。 3、 梅大高速路面塌…

Redis学习笔记(基础)

Redis学习笔记&#xff08;基础&#xff09; 一、Nosql概述1.1、为什么使用Nosql1.2、什么是Nosql1.3、阿里巴巴演进分析1.4、NoSQL的四大分类 二、 Redis入门2.1、概述2.2、Windows使用Redis2.3、linux安装2.4、redis-benchmark性能测试2.5、Redis基础知识 三、五大数据类型3.…

NIO(非阻塞I/O)和IO(阻塞I/O)详解

文章目录 一、NIO&#xff08;Non-blocking I/O&#xff0c;非阻塞I/O&#xff09;1、Channel&#xff08;通道&#xff09;与Buffer&#xff08;缓冲区&#xff09;1.1、使用ByteBuffer读取文件1.2、ByteBuffer 方法1.2、ByteBuffer 结构1.3、字符串与 ByteBuffer 互转1.4 Sca…

自然语言处理 (NLP) 中的迁移学习

--懂王 在大数据高速发展的时代&#xff0c;AI的发展日新月异&#xff0c;充满挑战的迎接未来。 自然语言处理 (NLP) 中的迁移学习: 迁移学习在 NLP 中越来越受欢迎&#xff0c;特别是在数据稀缺的情况下。如何有效地利用预训练的语言模型&#xff0c;并将其迁移到新的任务和领…

前端框架编译器之模板编译

未经作者允许&#xff0c;禁止转载 编译原理概述 编译原理&#xff1a;是计算机科学的一个分支&#xff0c;研究如何将 高级程序语言 转换为 计算机可执行的目标代码 的技术和理论。 高级程序语言&#xff1a;Python、Java、JavaScript、TypeScript、C、C、Go 等。计算机可执…

微软开源 MS-DOS「GitHub 热点速览」

上周又是被「大模型」霸榜的一周&#xff0c;各种 AI、LLM、ChatGPT、Sora、RAG 的开源项目在 GitHub 上“争相斗艳”。这不 Meta 刚开源 Llama 3 没几天&#xff0c;苹果紧跟着就开源了手机端大模型&#xff1a;CoreNet。 GitHub 地址&#xff1a;github.com/apple/corenet 开…

关于STC8 用定时器中断方式消抖误重复执行2次的原因

终于搞清楚了&#xff01; 原来&#xff1a;我项目需用到STC8的INT0/INT1&#xff08;2个脚都是类似插拔电&#xff0c;而非按键类型&#xff09;&#xff0c;本来完全可简简单单都用T0查询方式消抖(无需开ET0!其实软件消抖多几十ms都很可靠的了)! 但我想试试T0中断方式消抖的&…

golang 基础知识细节回顾

之前学习golang的速度过于快&#xff0c;部分内容有点囫囵吞枣的感觉&#xff0c;写gorm过程中有很多违反我常识的地方&#xff0c;我通过复习去修正了我之前认知错误和遗漏的地方。 itoa itoa自增的作用在编辑error code时候作用很大&#xff0c;之前编辑springboot的error c…

Stream流入门,Stream流创建

1、什么是Stream&#xff1f; *也叫Stream流&#xff0c;是JDK8开始新增的一套API&#xff0c;可以用于操作集合或者数组的数据。 *优势&#xff1a; Stream流大量结合了Lambda的语法风格来编程&#xff0c;提供了一种更加强大也更加简单的操作集合或者数组中的数据&#xf…

idea常用知识点随记

idea常用知识点随记 1. 打开idea隐藏的commit窗口2. idea中拉取Git分支代码3. idea提示代码报错&#xff0c;项目编译没有报错4. idea中实体类自动生成序列号5. idea隐藏当前分支未commit代码6. idea拉取新建分支的方法 1. 打开idea隐藏的commit窗口 idea左上角File→Settings…

前沿科技应用:AIGC技术的广泛渗透

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

『大模型笔记』MetaGPT: 多智能体框架:首家人工智能软件公司,走向自然语言编程

MetaGPT: 多智能体框架:首家人工智能软件公司,走向自然语言编程! 文章目录 一. MetaGPT: 多智能体框架二. MetaGPT-调研员-例子『大模型笔记』AI 智能体(Agent)在推理(Reasoning)、规划(Planning)与工具调度(Tool Calling)方面的研究:综合调查!一. MetaGPT: 多智能体框架 …

10、Python:字典类型(Dictionary)

字典的定义 在Python中&#xff0c;字典是一种可变容器模型&#xff0c;且可存储任意类型对象。字典的每个元素都是一个键值对。键必须是唯一的&#xff0c;而值则不必。 # 示例&#xff1a;创建一个字典 my_dict {name: Alice, age: 25, city: New York}常见运算操作 字典…

Python 正则表达式1 函数基础

正则表达式主要函数 注&#xff1a;表达式指正则表达式&#xff0c;字符串指待处理文本。 函数名称概要re.match()匹配检查字符串是否符合表达式&#xff0c;返回Match对象re.search()搜索搜索字符串是否包含表达式&#xff0c;返回Match对象re.findall()查询查询字符串所有符…

基于alpha shapes的边缘点提取(matlab)

1、原理介绍 由Edelsbrunner H提出的alpha shapes算法是一种简单、有效的快速提取边界点算法。其克服了点云边界点形状影响的缺点&#xff0c;可快速准确提取边界点。如下图所示&#xff0c;对于任意形状的平面点云&#xff0c;若一个半径为a的圆&#xff0c;绕其进行滚动&…

LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测(Matlab)

LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09; 目录 LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.LSTM-KDE的长短期…

Flutter笔记:Widgets Easier组件库(5)使用加减器

Flutter笔记 Widgets Easier组件库&#xff08;5&#xff09;&#xff1a;使用加减器 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…

机器学习:深入解析SVM的核心概念【三、核函数】

核函数 **问题一&#xff1a;为什么说是有限维就一定存在高维空间可分呢&#xff1f;**原始空间与特征空间为什么映射到高维空间可以实现可分核函数的作用 **问题二&#xff1a;最终怎么得到函数**从对偶问题到决策函数的步骤&#xff1a;结论 **问题三&#xff1a;为什么说特征…

nginx--第三方模块安装上传下载服务

第三方模块安装 准备 cd /usr/local/src/ yum install git -y git clone https://github.com/openresty/echo-nginx-module.git cd nginx-1.24.0 yum -y install perl-devel perl-ExtUtils-Embed zlib-devel gcc-c libtool openssl openssl-devel 编译安装 ./configure \--p…

ZooKeeper知识点总结及分布式锁实现

最初接触ZooKeeper是之前的一个公司的微服务项目中&#xff0c;涉及到Dubbo和ZooKeeper&#xff0c;ZooKeeper作为微服务的注册和配置中心。好了&#xff0c;开始介绍ZooKeeper了。 目录 1.ZooKeeper的基本概念 2.ZooKeeper的节点&#xff08;ZNode&#xff09; 3. ZooKeep…