scroll 事件到底是發生在那個元素上的？

時間 2019-11-24

標籤 scroll 事件到底發生那個元素简体版

原文原文鏈接

測試的瀏覽器有 1. chrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36
　　　　　　　 2. safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0.2 Safari/604.4.7html

　　　　　　　 3. Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:59.0) Gecko/20100101 Firefox/59.0
代碼以下：chrome

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
</head>
<style>
.scroll-container {
width: 200px;
border: 10px solid blue;
height: 300px;
overflow: scroll;
}

.scroll-container>div {
height: 1000px;
background-color: burlywood;
}
</style>

<body>
<div class="scroll-container" id="scrollContainer">
<div id="scrollChild">
1 2 3
</div>
</div>
</body>
<script>
window.onload = function () {
document.getElementById('scrollChild').onscroll = function () {
console.log('scrollChild scroll?')
}
document.getElementById("scrollContainer").onscroll = function () {
console.log('scrollContainer scroll?')
}
}
</script>

</html>