iframe去掉竖向滚动条仍可以滚动

简介: iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码:

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<style>

.inner-container{

position:absolute; left:0;

overflow-x:hidden;

overflow-y:scroll;

}

/* for Chrome 只针对谷歌浏览器*/

.inner-container::-webkit-scrollbar{

display:none;

}

</style>

</head>

<bodyclass="inner-container">

<h1>爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水爆米花&白开水</h1>

</body>

</html>

外部包含iframe的代码:

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<style>

.outer-container{

position:relative;

overflow:hidden;

}

</style>


</head>

<body>

<divclass="outer-container">

<iframemarginWidth=0marginHeight=0src="demo1.html"scrolling="auto"frameBorder=0width="100%"></iframe>

</div>

</body>

</html>

效果:

横向和竖向滚动条都消失,滚动鼠标的时候,内容仍然可以实现滚动效果。

目录
相关文章
|
4月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
1152 0
|
6月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
56 0
|
11月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
76 0
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
59 0
|
前端开发
css给超出内容设置滚动条和去除滚动条显示:
css给超出内容设置滚动条和去除滚动条显示:
208 0
|
前端开发
修改滚动条样式 #30
修改滚动条样式 #30
87 0
|
小程序
小程序隐藏滚动条但还能继续滚动
小程序隐藏滚动条但还能继续滚动
155 0
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
389 0