首页自定义指令来监听滚动事件，实现一个demo

自定义指令来监听滚动事件，实现一个demo

时间: 2024-03-17 10:46:01 浏览: 11

好的，以下是实现一个监听滚动事件的 demo： ```html <!DOCTYPE html> <html> <head> <title>Scroll Event Demo</title> </head> <body> <div id="container" style="height: 500px; overflow-y: scroll;"> <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul> </div> <script> function onScroll(event) { console.log("Scrolling..."); } const container = document.getElementById("container"); container.addEventListener("scroll", onScroll); </script> </body> </html> ``` 这段代码创建了一个 `div` 容器，容器内部有一个可以滚动的 `ul` 列表。通过监听容器的 `scroll` 事件，当用户滚动容器时，会触发 `onScroll` 函数。在本例中，`onScroll` 函数只是简单地在控制台输出一条消息。