如何控制框架頁的滾動
解決思路:
利用框架文檔中window對象的scrollBy方法來滾動。
具體步驟:
1. 包含框架頁的代碼。 <script> var itv,stepX,stepY,obj function scrollStart(x,y){ stepX=x //X軸方向上的偏移量 stepY=y //Y軸方向上的偏移量 obj=document.frames.demo //捕獲框架對象 //設(shè)置間隔事件,每10毫秒以stepX和stepY為偏移量滾動一次 itv=setInterval("obj.scrollBy(stepX,stepY)",10) } function scrollStop(){ clearInterval(itv) //取消間隔事件,達到停止?jié)L動的效果 } </script> <iframe frameborder="0" scrolling="no" name="demo" src="demo.htm"></iframe> <button >上</button> <button >下</button> <button >左</button> <button >右</button> 2.demo.htm頁代碼。這里僅僅是為了測試效果,可以替換為你自己的頁面。 <script> //為了產(chǎn)生橫向滾動條 document.write(new Array(100).join("1 ")) //為了產(chǎn)生縱向滾動條 document.write(new Array(100).join("1<br>")) </script> 注意:如果iframe所加載的頁為站外URL,將導致跨域問題,拒絕訪問。凡是涉及到對框架頁的訪問及控制,都會有跨域問題。
特別提示
代碼運行后的效果如圖1.6.8所示。鼠標移上四上按鈕上后,iframe內(nèi)所加載的頁面將分別向上、下、左和右四個方面滾動,在按下鼠標時滾動速度加快,松開鼠標(仍然在按鈕上)時恢復速度,鼠標移開后滾動停止。
1.6.8 控制iframe的滾動
本例主要是window對象的scrollBy方法的應(yīng)用。通過設(shè)置橫向滾動速度stepX和縱向滾動速度stepY為全局變量,在鼠標移上時在函數(shù)中用setInterval不斷調(diào)用scrollBy方法滾動頁面,通過參數(shù)控制滾動方向,在鼠標按下時放大全局變量stepX或stepY的值,人而達到加快滾動速度的效果,而鼠標移開后再用clearInterval方法清除之前的setInterval事件以停止?jié)L動。
scrollBy 將窗口滾動 x 和 y 偏移量。
setInterval 每經(jīng)過指定毫秒值后計算一個表達式。
clearInterval 使用 setInterval 方法取消先前開始的間隔事件。