當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


HTML onscroll事件用法及代碼示例


使用滾動條時,將發生HTML DOM onscroll事件。 CSS溢出用於創建滾動條。

用法:

  • 在HTML中:
    <element onscroll="myScript">
  • 在JavaScript中:
    object.onscroll = function(){myScript};
  • 在JavaScript中,使用addEventListener()方法:
    object.addEventListener("scroll", myScript);

例:使用addEventListener()方法


<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM onscroll Event 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <h2>HTML DOM onscroll Event</h2> 
        <textarea style="width:100%" id="tID"> 
            HTML stands for Hyper Text Markup Language.  
          It is used to design web pages using markup language.  
          HTML is the combination of Hypertext and Markup language.  
          Hypertext defines the link between the web pages.  
          Markup language is used to define the text document  
          within tag which defines the structure of web pages.  
          HTML is a markup language which is used by the browser 
          to manipulate text, images and other content to 
          display it in required format. 
        </textarea> 
  
        <p id="try"></p> 
    </center> 
    <script> 
        document.getElementById( 
          "tID").addEventListener("scroll", GFGfun); 
  
        function GFGfun() { 
            document.getElementById( 
              "try").innerHTML = "Textarea scrolled."; 
        } 
    </script> 
  
</body> 
  
</html>

輸出:

支持的瀏覽器:下麵列出了HTML DOM onscroll Event支持的瀏覽器:

  • 穀歌瀏覽器
  • IE瀏覽器
  • Firefox
  • 蘋果Safari
  • Opera


相關用法


注:本文由純淨天空篩選整理自Vijay Sirra大神的英文原創作品 HTML | DOM onscroll Event。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。