原生监听子页面滚动

最新推荐文章于 2023-01-16 18:35:30 发布

dongsdh

最新推荐文章于 2023-01-16 18:35:30 发布

阅读量302

点赞数

分类专栏： iframe

本文链接：https://blog.csdn.net/dongsdh/article/details/106501431

版权

iframe 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：六一儿童节的第二天快乐。

需求:父级页面有一个按钮，父页面iframe引入了vue项目生成的子页面index.html

子页面滚动的时候，当滚动距离<100时，父页面按钮消失，>100父页面按钮显示

父页面

//       供子页面调用
         function isshowBartop(scrollTop){
            //scrollTop为子页面滚动条的滚动的值
            //如果scrollTop<100，回到顶部的按钮消失
            if(scrollTop<100){
         		$('.jsgotop').fadeOut();
         	}else{
         		$('.jsgotop').fadeIn();
         	}
         }

子页面(vue项目生成后的index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>大家好</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
    	window.onscroll = function() {
    		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		  	window.parent.isshowBartop(scrollTop);
    	}
    </script>
  </body>
</html>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生监听子页面滚动

项目首页为普通页面导航条，和vue项目生成后拼起来的页面父页面// 供子页面调用 function isshowBartop(scrollTop){ //scrollTop为子页面滚动条的滚动的值 //如果scrollTop<100，回到顶部的按钮消失 if(scrollTop<100){ $('.jsgotop').fadeOut(); }e
复制链接

扫一扫

专栏目录