如何控制架構頁的滾動

控制

　　如何控制架構頁的滾動

　　解決思路：

    利用架構文檔中window對象的scrollBy方法來滾動。

　　具體步驟：

　　1. 包含架構頁的代碼。

<script>
var itv,stepX,stepY,obj
function scrollStart(x,y){
stepX=x       //X軸方向上的位移量
stepY=y       //Y軸方向上的位移量
obj=document.frames.demo    //捕獲架構對象
//設定間隔事件，每10毫秒以stepX和stepY為位移量滾動一次
itv=setInterval("obj.scrollBy(stepX,stepY)",10)
}
function scrollStop(){
clearInterval(itv)            //取消間隔事件，達到停止滾動的效果
}
</script>
<iframe frameborder="0" scrolling="no" name="demo"
 src="demo.htm"></iframe>
<button  
  
>上</button>
<button 
  
 >下</button>
<button 
   
>左</button>
<button 
  
 >右</button>

　　2.demo.htm頁代碼。這裡僅僅是為了測試效果，可以替換為你自己的頁面。

<script>
//為了產生橫向捲軸
document.write(new Array(100).join("1  ")) 
//為了產生縱向捲軸
document.write(new Array(100).join("1<br>")) 
</script>

　　注意：如果iframe所載入的頁為站外URL，將導致跨域問題，拒絕訪問。凡是涉及到對架構頁的訪問及控制，都會有跨域問題。

　　特別提示

　　代碼運行後的效果如圖1.6.8所示。滑鼠移上四上按鈕上後，iframe內所載入的頁面將分別向上、下、左和右四個方面滾動，在按下滑鼠時捲動速度加快，鬆開滑鼠(仍然在按鈕上)時恢複速度，滑鼠移開後滾動停止。

1.6.8 控制iframe的滾動

特別說明

　　本例主要是window對象的scrollBy方法的應用。通過設定橫向捲動速度stepX和縱向捲動速度stepY為全域變數，在滑鼠移上時在函數中用setInterval不斷調用scrollBy方法滾動頁面，通過參數控制滾動方向，在滑鼠按下時放大全域變數stepX或stepY的值，人而達到加快捲動速度的效果，而滑鼠移開後再用clearInterval方法清除之前的setInterval事件以停止滾動。

　　scrollBy 將視窗滾動 x 和 y 位移量。

　　setInterval 每經過指定毫秒值後計算一個運算式。

　　clearInterval 使用 setInterval 方法取消先前開始的間隔事件。