iframe双滚动条 解决方式 CSS3 overflow-y 属性

最新推荐文章于 2023-05-30 17:25:48 发布
最新推荐文章于 2023-05-30 17:25:48 发布
阅读量4.2k 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chx10051413/article/details/40738937
版权


裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

div
{
overflow-y:hidden;
}
 

 

 

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
 

<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>
 

<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
 

</body>
</html>



                

        

        

    

  


    

      

        

            

              
                
                  北京-星辰
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
完全搞定iframe（框架）里的滚动条.doc

				
			

			

				

					08-22
				

			

		

		

			
				
完全搞定iframe（框架）里的滚动条！.doc

			
		

	



                

            
              



	

		

			

				
					
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

				
			

			

				

					09-25
				

			

		

		

			
				
如果你只想让元素在垂直方向（即上下）有滚动条，而禁止水平方向（左右）的滚动，你可以结合使用`overflow-y`和`overflow-x`两个属性来实现这一效果。`overflow-y: scroll`确保元素在内容高度超出时显示垂直滚动条，...

			
		

	



              


  
              

                


	

		

			

				
					
iframe双滚动栏 解决方案  CSS3 overflow-y 属性

				
			

			

				

					weixin_34060299的博客
				

				

					08-10
					
					164
					
				

			

		

		

			
				

裁剪 div 元素中内容的左/右边缘 - 假设溢出元素的内容区域的话：
div
{
overflow-y:hidden;
}






<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:110px;
height:110px;
border:thin...

			
		

	





	

		

			

				
					
解决iframe出现两个滚动条的问题

				
			

			

				

					fengzi_manong的博客
				

				

					07-21
					
					6995
					
				

			

		

		

			
				
花了一个多小时，终于解决了因为iframe框架出现两个滚动条的问题。原理( 借鉴了网上kaka的思路，但是js与他写的不一样)是：
1.强制隐藏最上层窗口的滚动条
2.获取浏览器窗口的高度
3.用浏览器窗口的高度减去头部iframe的高度就是内容iframe的高度了
       


    main
    ">
    
    
$(function(){
    

			
		

	



		

			
		



	

		

			

				
					
iframe出现双层滚动条解决方案

				
			

			

				

					lipeng的博客
				

				

					06-24
					
					3093
					
				

			

		

		

			
				

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。
下面是通过jquery.layout.js来解决双滚动条问题。
html代码
&lt;body &gt;
		&lt;div id="mainFrameDiv" class="ta...

			
		

	





	

		

			

				
					
页面中嵌套iframe导致页面出现滚动条

				
			

			

				

					程先生的博客
				

				

					05-30
					
					3107
					
				

			

		

		

			
				
经过查询发现，是因为iframe元素不是标准的块级元素，导致虽然设置了height: calc(100% - 60px);然后通过控制台查看高度也确实没有问题。但是就是出现了滚动条，这样的话，就只能通过设置iframe为块级元素来确定了。如果大家想要自己测试一下的话，可以下载下面的代码，然后通过对29行中，display:block;的注释和非注释来看下具体的表现形式；页面头部一个固定的div元素，下面是一个iframe嵌套的页面。但是发现页面会出现滚动条。

			
		

	





	

		

			

				
					
css除了overflow-y scroll滚动还有什么可以滚动的

					
最新发布

				
			

			

				

					06-11
				

			

		

		

			
				
除了 `overflow-y: scroll`，CSS 还提供了以下属性可以滚动：  1. `overflow-x: scroll`：允许在水平方向上滚动内容。 2. `overflow: auto`：自动决定是否需要滚动条，如果需要则显示。 3. `overflow-x: auto`：自动...

			
		

	





	

		

			

				
					
JS去除iframe滚动条的方法

				
			

			

				

					10-24
				

			

		

		

			
				
去除iframe滚动条的一种常见做法是通过JavaScript修改iframe的属性。在给定文件中，介绍了如何通过操作`scrolling`属性来实现这一目标。`scrolling`属性是一个用于控制是否显示滚动条的属性。在HTML标准中，它可以...

			
		

	





	

		

			

				
					
iframe在IE6下出现横向滚动条的解决方案

				
			

			

				

					09-22
				

			

		

		

			
				
在深入探讨如何解决IE6下iframe出现横向滚动条的问题之前，我们需要了解几个关键的前端技术概念，包括iframe的使用、IE6浏览器的特殊性以及CSS（层叠样式表）和JavaScript（JS）的运用。  首先，iframe（内联框架）...

			
		

	





	

		

			

				
					
IOS上iframe的滚动条失效的解决办法

				
			

			

				

					09-01
				

			

		

		

			
				
在iOS设备上，如iPad和iPhone，用户可能会遇到一个特定的问题，那就是在使用`iframe`时，滚动条无法正常工作。当`iframe`的内容高度超过其设定的高度时，内部HTML的滚动条不会显示，导致超出部分的内容无法查看，...

			
		

	





	

		

			

				
					
锚点，iframe,溢出

				
			

			

				

					lemonnomel1的博客
				

				

					04-14
					
					872
					
				

			

		

		

			
				
1.锚点a标签除了用做页面跳转外还可以做锚点本页面的锚点是通过改变滚动条的位置实现页面跳转后的锚点会通过先跳转页面再改变滚动条的位置来实现可以将a的href属性链接到另一个a的name属性或者任何元素的id属性在做锚点下面是四个不同颜色的盒子通过锚点跳转到各自的位置&lt;ul&gt;
    &lt;li&gt;&lt;a href="#li1"&gt;1&lt;/a&gt;&lt;/li&gt...

			
		

	





	

		

			

				
					
HTML 两个div滚动条同时滚动

				
			

			

				

					蔡燃的博客
				

				

					02-22
					
					2578
					
				

			

		

		

			
				
实现思路：

1.通过jquery 监听div滚动事件来设置其他div同时滚动

    2.为不是多个同时滚动div的滚动监听事件互相重复影响，通过当鼠标移动到哪个div上时使用哪个div进行滚动监听，其他div不进行滚动监听。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 两个div滚动条同时滚动...

			
		

	





	

		

			

				
					
 完全搞定iframe（框架）里的滚动条！（一）

					
热门推荐

				
			

			

				

					xpnew的技术blog
				

				

					05-07
					
					1万+
					
				

			

		

		

			
				
 完全搞定iframe（框架）里的滚动条！（一）说明：1、本文参考了网络上大量资料，本人在此深表感谢！2、本文假设读者，有一定的HTML、CSS、JS基础。3、本文讨论的目标是，通过A页面里的标记引用B网页之后，在A页面上出现滚动条这种情况的几种解决办法。4、因为篇幅的关系，文章被分成了两部分。通常情况下，（一）就能解决你的问题，（二）将会深入探讨这个问题和相关的解决方案。5、如果你觉得我啰嗦

			
		

	





	

		

			

				
					
iframe去除双滚动条

				
			

			

				

					心若向阳 无谓悲伤
				

				

					06-07
					
					3212
					
				

			

		

		

			
				
iframe嵌套的内容多的时候会自带滚动条一、问题描述二、问题处理1.思路2.实现三、效果
一、问题描述
当iframe嵌套的内容多的时候会自带滚动条，致使出现双滚动条，如图

二、问题处理
1.思路
使得iframe的高度和自动根据内容的大小进行调控
2.实现
1、父页面增加以下内容，即根据页面内容动态给iframe高度的赋值：
<script type="text/javascript">
	     	function setIframeHeight() {
		 		var iframe

			
		

	





	

		

			

				
					
ipad air2给iframe父元素设置overflow:auto无法滚动

				
			

			

				

					weixin_44283589的博客
				

				

					05-25
					
					155
					
				

			

		

		

			
				
【代码】ipad air2给iframe父元素设置overflow:auto无法滚动。

			
		

	





	

		

			

				
					
iframe滚动条充当浏览器滚动条

				
			

			

				

					dijian0251的博客
				

				

					08-19
					
					323
					
				

			

		

		

			
				
在做博客项目的时候，使用了iframe，方便根据选择的文章类别切换显示的内容，但是文章一般都有很多，通过bootstrap的媒体列表的方式显示的话，iframe是一定会出现滚动条的，特别是我添加了一个“滚动条触底之后动态加载更多的文章”的功能。这样页面上就会有两个滚动条，特别奇怪。
在网上学习了一些之后，我把iframe的滚动条隐藏了（不是将iframe的scrolling属性改...

			
		

	





	

		

			

				
					
ios webview 与 iframe 兼容性问题（overflow 属性无效）

				
			

			

				

					weixin_42253152的博客
				

				

					08-03
					
					3630
					
				

			

		

		

			
				
同一个html页面，在安卓和pc都是没有异常的，到了ios就只显示一半，下面的那一半被腰斩了。

解决方法（并没有完美解决，上下滑动依旧存在bug，有更优解欢迎评论）

第一步，在css样式中加上

&lt;style&gt;

#wrapper{height:800px;-webkit-overflow-scrolling:touch;overflow:auto;}

&lt;/style&gt...

			
		

	





	

		

			

				
					
修改滚动条样式

				
			

			

				

					梦是太匆
				

				

					07-31
					
					253
					
				

			

		

		

			
				
要修改的div的class名为scroll，样式如下：


.scollbox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.scollbox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 5px;
    background-color: #033b89;
}
.scollbo

			
		

	





	

		

			

				
					
overflow滚动条无效

				
			

			

				

					hua_ban_yu的博客
				

				

					12-14
					
					9764
					
				

			

		

		

			
				
在开发一个项目中遇一个奇葩的问题，设置了overflow：auto样式，按理来说当表格内容超出后就会出现滚动条，y轴滚动条是出现了，
x轴滚动条无论如何设置都是现实不出来。看了样式，发现overflow:auto样式也没有被覆盖，非常奇怪感觉撞邪邪一样。
经过多番查询才发现，开发项目使用的jsp文件，使用进行页面布局最外成的标签设置了overflow:hidden，
原因：原来是设置了一个固

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值