用js实现鼠标滚动无法控制iframe页面的上下载滚动?

javaiswhat 2008-10-25 09:58:33

用js实现鼠标滚动无法控制iframe页面的上下载滚动?

谢谢

...全文

251 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

javaiswhat 2008-10-26

打赏
举报

谢谢各位,现在出现了一个新的需求,当鼠标移动到ifreme页面上去的时候,让滚动鼠标失效(针对父窗口)

showde123 2008-10-26

打赏
举报

mark

老紫竹 2008-10-26

打赏
举报

人家要的是如何实现滚动，我猜大家都想反了吧！

sunyujia 2008-10-26

打赏
举报

又算了一会发现无法计算出浏览器边框线的宽度，自己调整了6px

<html>

  <head>

    <title></title>

  </head>

  <body>

  <iframe src="test.html" height="100" width="100%" > </iframe>

   <p style="height: 99999px;">test</p>

  </body>

</html>

<html>

  <head>

    <title>子窗口</title>

    <script type="text/javascript">

    	var tmp;

    	function over(){

    		var p=window.parent;

    		tmp=p.document.body.offsetWidth-p.document.body.clientWidth+6;

    		p.document.body.style.marginRight=tmp;

    		p.document.body.style.overflow='hidden';

    	}

      	function out(){

      		var p=window.parent;

      		p.document.body.style.marginRight="";

    		p.document.body.style.overflow='';

    	}

    </script>

  </head>

  <body onmouseover="over();" onmouseout="out();">

  </body>

</html>

sunyujia 2008-10-26

打赏
举报

修正第一个

<html>

  <head>

    <title></title>

  </head>

  <body>

  <iframe src="test.html" height="100" width="100%" scrolling="no"> </iframe>

  </body>

</html>

sunyujia 2008-10-26

打赏
举报

在iframe里面的页面onScroll="document.body.scrollTop=0" 后，连鼠标左键硬性拖拽也不灵光了，呵呵。

<html>

  <head>

    <title></title>

  </head>

  <body>

  <iframe src="test.html" height="100" width="100%" scrolling="no" onScroll="alert('a')"> </iframe>

  </body>

</html>

<html>

  <head>

    <title></title>

  </head>

  <body  onScroll="document.body.scrollTop=0" >

  <p style="height: 200px;">test</p>

  </body>

</html>

sunyujia 2008-10-26

打赏
举报

调了好一会还是感觉有点抖动，不是很好，嗨。。。不抖的话就完美了。

<html>

  <head>

    <title></title>

    <script type="text/javascript">

    	function scrollListener(){

    		demo.innerHTML="scrollListener"+new Date();

    	    document.body.onscroll=scrollListener;

    		window.lastScrollIdx=document.body.scrollTop;

    	}

     	function keepScroll(){

     	    document.body.onscroll=keepScroll;

     		if(window.lastScrollIdx==null)

     			window.lastScrollIdx=document.body.scrollTop;

     		demo.innerHTML="keepScroll"+new Date();

    		document.body.scrollTop=window.lastScrollIdx;

    	}

    </script>

  </head>

  <body onscroll="scrollListener()">

  <iframe src="test.html" height="300" width="100%" > </iframe>

   <div style="height: 99999px;" id="demo">test</div>

  </body>

</html>

<html>

  <head>

    <title>子窗口</title>

  </head>

  <body onmouseover="window.parent.keepScroll();test.innerHTML='over'" onmouseout="window.parent.scrollListener();test.innerHTML='out'">

  <div id="test"></div>

  </body>

</html>

sunyujia 2008-10-26

打赏
举报

方案1

<html>

  <head>

    <title></title>

  </head>

  <body>

  <iframe src="test.html" height="100" width="100%" > </iframe>

   <p style="height: 99999px;">test</p>

  </body>

</html>

<html>

  <head>

    <title>子窗口</title>

  </head>

  <body onmouseover="window.parent.document.body.style.overflow='hidden';" onmouseout="window.parent.document.body.style.overflow='';">

  </body>

</html>