javascript跟隨捲軸滾動,onscroll事件的學習

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　今天研究了一下,捲軸事件,也是在無憂上看到的,順便做下記錄@

比如做一個浮動廣告效果,原理就是設定一個定時器0.1秒檢測層所在的位置並將他指定到相當於視窗的位置.

核心代碼如下:

代碼

<script type="text/javascript">  
function scrollImg(){  
var posX,posY;  
if (window.innerHeight) { //相容判斷 
        posX = window.pageXOffset;  
        posY = window.pageYOffset;  
    }  
else if (document.documentElement && document.documentElement.scrollTop) { //相容判斷 

        posX = document.documentElement.scrollLeft;  
        posY = document.documentElement.scrollTop;  
    }  
else if (document.body) {  //相容判斷 

        posX = document.body.scrollLeft;  
        posY = document.body.scrollTop;  
    }  

var ad=document.getElementById("ad");  
    ad.style.top=(posY+100)+"px";  
    ad.style.left=(posX+50)+"px";  
    setTimeout("scrollImg()",100);  
}  
</script>

重點,也是常犯錯誤的地方:

在xhtml頁面中，document.body.scrollTop始終為0，即該屬性無效，因此必須用其他的屬性來判斷，為相容新舊標準，應該對屬性的可用性進行判斷。

應用WEB標準會使ScrollTop屬性失效！！！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 加上這段後，document.body.scrollTop永遠等於0 body onscroll = "alert(document.body.scrollTop);"永遠也不會引發。

解決辦法：使用：

document.documentElement.scrollTop

下面有2個例子

樣本一： var scrollPos; if (typeof window.pageYOffset != 'undefined') {  //netscape scrollPos = window.pageYOffset; }

else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; }

else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; }

alert(scrollPos); 樣本二： function WebForm_GetScrollX() { if (__nonMSDOMBrowser) { return window.pageXOffset; } else {      if (document.documentElement && document.documentElement.scrollLeft)      {           return document.documentElement.scrollLeft;       }     else if (document.body)     {        return document.body.scrollLeft;     } }     return 0; } @@@@@@pageYOffset是netscape的 document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他們的真正區別，

只知道documentElement.scrollTop是xhtml相容的（作者用的是strict）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript跟隨捲軸滾動,onscroll事件的學習

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support