前端技术之iframe2

古城微笑少年丶 2022-06-09 12:56 143阅读 0赞

一、之前在 **前端技术之iframe1** 这篇的时候有一个获取iframe加载页面的元素并动态赋值的一个例子，但是有几种情况是无法实现的：

1.你要操作的这个元素是设置了类似position:fixed；top：72%；

2.他的大盒子设置了例如：

html,body{
        height: 100%;
        overflow: auto;
       -webkit-overflow-scrolling: touch;
    }

3.你的这个元素所在的页面是iframe加载的

这种情况下，你是无法拿到window.onscroll里document.scorllTop的值的（除非解除overflow这个css），因为它不会触发这个，那么为啥要解决这个问题？是因为在ipone端的h5页面，滑动时设置在侧边位置的元素并没有跟随滑动，而是你在拖动屏幕的时候它消失，放开时又出现，给人的体验很不好。

那么怎么解决呢？下面附上完整的代码：

4.js核心部分：index页面

html部分：

css部分：

.iphone{
    				-webkit-overflow-scrolling:touch;
    				overflow:auto;
    				height:100%;
    				position: fixed;
        			margin-top: 0px ;
    			}

另一个main.html页面：

html部分：

css部分：

.content{
    				-webkit-overflow-scrolling: touch;
        			overflow-y: scroll;
    			}
    			.aaa{    
    			    position: fixed;
    			    z-index: 997;
    			    width: 125px;
    			    height: 30px;
    			    left: 63%;
    			    top: 30%;
    			    display: block;
    			    background: red;
    			}
    			html,body{
    			    height: 100%;
    			    overflow: auto;
    			   -webkit-overflow-scrolling: touch;
    			}

效果图：  
![20170906113346975][]

[20170906113346975]: /images/20220609/f1c977e095c74341ba61c61117bfb94a.png