HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

JavaScript 中 onscroll 事件的用法是什么?

htmljavascriptprogramming scripts更新于 2026/1/13 23:40:17

当滚动条滚动元素时，会发生 onscroll 事件。您可以尝试运行以下代码来了解如何在 JavaScript 中实现 onscroll  事件。

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            border: 2px solid blue;
            width: 300px;
            height: 100px;
            overflow: scroll;
         }
      </style>
   </head>
   
   <body>
      <div id="content">
         This is demo text. This is demo text.This is demo text.This is demo text.
         This is demo text.This is demo text.This is demo text.This is demo text.
         This is demo text.This is demo text.This is demo text.
         This is demo text.This is demo text.This is demo text.
         This is demo text.This is demo text.This is demo text.
      </div>
      <p id = "myScroll"> </p>
      <script>
         document.getElementById("content").onscroll = function() {myFunction()};
         function myFunction() {
            document.getElementById("myScroll").innerHTML = "Scroll successfull!.";
         }
      </script>
   </body>
</html>

相关文章

有用资源

打印 下一节:JavaScript 中的 onresize 事件有什么用? ❯❮ 上一节:JavaScript 中 onpagehide 事件的用法是什么?