小码哥的IT人生

onscroll 事件

JavaScript基础 2022-06-08 12:02:37小码哥的IT人生shichen

onscroll 事件

实例

在滚动 <div> 元素时执行 JavaScript:

<div onscroll="myFunction()">

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>
</head>
<body>
<p>请试试 div 中的滚动条。</p>
<div onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p>Scrolled <span id="demo">0</span> times.</p>
<script>
var x = 0;
function myFunction() {
  document.getElementById("demo").innerHTML = x += 1;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

onscroll 事件在元素的滚动条被滚动时发生。

提示:请使用 CSS overflow 样式属性为元素创建滚动条。

浏览器支持

事件 Chrome IE Firefox Safari Opera
onscroll 支持 支持 支持 支持 支持

语法

在 HTML 中:

<element onscroll="myScript">

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>
</head>
<body>
<p>请试试 div 中的滚动条。</p>
<div onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "You scrolled in div.";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

在 JavaScript 中:

object.onscroll = function(){myScript};

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>
</head>
<body>
<p>本例使用 HTML DOM 将 "onscroll" 事件分配给 div 元素。</p>
<p>请试试 div 中的滚动条</p>
<div id="myDIV">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").onscroll = function() {myFunction()};
function myFunction() {
  document.getElementById("demo").innerHTML = "You scrolled in div.";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

在 JavaScript 中,使用 addEventListener() 方法:

object.addEventListener("scroll", myScript);

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>
</head>
<body>
<p>本例使用 addEventListener() 方法将 "scroll" 事件附加到 div 元素。</p>
<p>请试试 div 中的滚动条</p>
<div id="myDIV">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("scroll", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "You scrolled in div.";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

注释:Internet Explorer 8 或更早的版本不支持 addEventListener() 方法

技术细节

冒泡: 不支持
可取消: 不支持
事件类型: 如果从用户界面生成,UiEvent。否则 Event
支持的 HTML 标签: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM 版本: Level 2 Events

更多实例

示例代码:

在不同滚动位置的类名之间切换 - 当用户从页面顶部向下滚动 50 像素时,类名 "test" 将被添加到元素中(再次向上滚动时将被删除)。

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
.test {
  background-color: yellow;
}
</style>
</head>
<body style="height:1500px">
<p>向下滚动此页面</p>
<p id="myP" style="position:fixed">当您从该页面顶部滚动 50 像素后,将类 "test"(黄色背景色)添加到该段落。再次向上滚动以删除类。</p>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

当用户从页面顶部向下滚动 350 像素时滑入元素(添加 slideUp 类):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
body {height:1500px;}
.col-1 {float:left}
.col-2 {float:left;padding-left:25px;}
img {width:180px;height:100px;visibility:hidden;}
hr {margin-top:400px;}
</style>
</head>
<body>
<p>请向下滚动此页面</p>
<p>当您从顶部滚动 350 像素时,图像将滑入。</p>
<hr>
<div class="col-1">
  <img id="myImg" src="/i/photo/tulip.jpg" width="300" height="300">
</div> 
<div class="col-2">
  Just some text..
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024