当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。