iframe滚动条充当浏览器滚动条
在做博客项目的时候,使用了iframe,方便根据选择的文章类别切换显示的内容,但是文章一般都有很多,通过bootstrap的媒体列表的方式显示的话,iframe是一定会出现滚动条的,特别是我添加了一个“滚动条触底之后动态加载更多的文章”的功能。这样页面上就会有两个滚动条,特别奇怪。
在网上学习了一些之后,我把iframe的滚动条隐藏了(不是将iframe的scrolling属性改为scrolling=“no”),而是通过css将其在视觉上隐藏起来(下面有代码),这样就可以只出现一个滚动条,但是这样的话,文章确实一直在动态加载,但是浏览器的滚动条却一直没有动,感觉也很奇怪~
最后
我决定把浏览器的滚动条隐藏,iframe的滚动条放出来,并且通过对iframe和承载它的div做了一些css上的调整,让iframe滚动条“充当”了浏览器的滚动条。图片中箭头指向的滚动条实际上是iframe的
css:对homepage的滚动条隐藏:
/*在视觉上将iframe的滚动条隐藏*/
/*主要是将width置为0px*/
::-webkit-scrollbar {
width: 0px;
height: 5px;
}
/*下面的css定义可以不写,如果width不是0px的时候,通过下面的css定义可以自定义其他样式的滚动条*/
::-webkit-scrollbar-thumb{
background-color: transparent;
-webkit-border-radius: 5px;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical:active{
background-color: transparent;
}
::-webkit-scrollbar-button{
display: none;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
对承载iframe的div和iframe,一定要充满整个浏览器可视页面,如果有footer和nav的话,也要在右侧给滚动条留出大概15px的宽度,不然就不像浏览器滚动条了
<div class="container main-page" >
<iframe src="/blog/p/recommend" frameborder="0" scrolling="yes" height="100%" width="100%" allowtransparency="true" id="external-frame" name="frame">
</iframe>
</div>
文章转自:https://blog.csdn.net/qq_41604498/article/details/99735882
反正都是自己的博客~~
iframe滚动条充当浏览器滚动条的更多相关文章
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条
关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...
- 转:python webdriver API 之控制浏览器滚动条
有时候 web 页面上的元素并非直接可见的,就算把浏览器最大化,我们依然需要拖动滚动条才能看到想要操作的元素, 这个时候就要控制页面滚动条的拖动, 但滚动条并非页面上的元素, 可以借助 JavaScr ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- 网站开发中使用javascript获取浏览器滚动条宽度
在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求.记录如下: 首先说明一下原理: ①生成一个div,设置滚动条不可见,记录其宽度: ②将上面的d ...
- CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)
字体渐变 https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条 https://blog.csdn. ...
- 通过selenium控制浏览器滚动条
目的:通过selenium控制浏览器滚动条 原理:通过 driver.execute_script()执行js代码,达到目的 driver.execute_script("window.sc ...
- 浏览器滚动条及其影响 calc()
1.浏览器滚动条 默认风格各异,推荐一插件 mCustomScrollbar 不考虑兼容也可自定义样式 链接二 2.影响 以垂直方向为例,当内容变化的时候,如果设置的是overflow:aut ...
随机推荐
- 连接池大小调优 原创: ImportNew ImportNew 2017-06-07
连接池大小调优 原创: ImportNew ImportNew 2017-06-07
- PHP操作文件常用函数
[获取文件信息的函数] basename($path[,扩展名]) 返回文件路径中去掉路径后的文件名称."/root/a.txt"输出a.txt;带上.txt输出a. dirnam ...
- python模块之request模块的理解
首先还是老生长谈,说说定义和作用,request模块是一个用于访问网络的模块,其实类似的模块还有很多,不在一一在这里解释.这么多的相似的模块为什么都说只有这个好用呢.因为他人性化.如果你学过urlli ...
- 23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮:
/* 一.Flutter FloatingActionButton介绍 FloatingActionButton简称FAB,可以实现浮动按钮,也可以实现类型闲鱼app的底部凸起导航. child:子视 ...
- 跟我学Shiro目录贴
转发地址:https://www.iteye.com/blog/jinnianshilongnian-2018398 扫一扫,关注我的公众号 购买地址 历经三个月左右时间,<跟我学Shiro&g ...
- go timer定时器 WaitGroup用法
参考文章: timer定时器: https://www.cnblogs.com/oxspirt/p/7107312.html WaitGroup用法: https://studygolang.com/ ...
- Linux内核编译、安装流程
原文链接:https://blog.csdn.net/qq_28437139/article/details/83692907 此处只讲linux内核编译步骤至于安装虚拟机,安装ubuntu操作系统请 ...
- iOS-AES算法总结
AESCipher.h #import <Foundation/Foundation.h> @interface AESCipher : NSObject /** 加密算法 @param ...
- php 获取文件mime类型的方法
php 获取文件mime类型的方法 使用fileinfo需要安装php_fileinfo扩展. 如已安装可以在extension_dir目录下找到php_fileinfo.dll(windows),f ...
- Java操作word转pdf
如果转换后出现乱码,是doc格式的文档的话请转换为docx!!! 下载相关jar包和一个授权到2099年的凭证文件. 链接: https://pan.baidu.com/s/1xudkKqR1-TLL ...