GlobalEventHandlers.onscroll

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

元素的 scroll 事件处理函数。

语法

element.onscroll = functionReference

参数

functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。

备注： 不要将 onscroll 与 onwheel混淆。onwheel 是鼠标滚轮旋转，而 onscroll 处理的是对象内部内容区的滚动事件。

示例

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      #container {
        position: absolute;
        height: auto;
        top: 0;
        bottom: 0;
        width: auto;
        left: 0;
        right: 0;
        overflow: auto;
      }

      #foo {
        height: 1000px;
        width: 1000px;
        background-color: #777;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="foo"></div>
    </div>

    <script type="text/javascript">
      document.getElementById("container").onscroll = function () {
        console.log("scrolling");
      };
    </script>
  </body>
</html>

Example

这个示例能说明更多问题

This example monitors scrolling on a <textarea>, and logs the element's vertical scroll position accordingly.

HTML

html

<textarea>1 2 3 4 5 6 7 8 9</textarea>
<p id="log"></p>

CSS

css

textarea {
  width: 4rem;
  height: 8rem;
  font-size: 3rem;
}

JavaScript

const textarea = document.querySelector("textarea");
const log = document.getElementById("log");

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Scroll position: ${e.target.scrollTop}`;
}

Result

注意

当用户滚动某个元素的内容时 scroll 事件将会被触发。Element.onscroll 同等于 element.addEventListener("scroll" ... )。

规范

Specification
CSSOM View Module # eventdef-document-scroll
HTML Standard # handler-onscroll