您的位置：首页 > Web前端 > HTML

html中滚动条的监听

2015-12-20 17:59 645 查看

html中滚动条的监听

在很多的商品类网页的DOM加载顺序中,商品不是一次性加载完成的,而是用户在滑动滚动条的时候,js代码根据用户的滑动滚动条的距离来确定的,下面我们来写一个最简单的监听实例

<!DOCTYPE html>
<html>
<head>
<title>简单监听滚动条</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">

#main {
margin: 0 auto;
width: 100%;
}

ul {
margin: 0;
padding: 0;
}

ul li {
list-style-type: none;
margin: 0;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
</div>
<script type="text/javascript">
/*
*  利用原生的javascript来监听网页的滚动条
*/
window.onscroll = function () {
//htmlHeight 是网页的总高度
var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
//clientHeight是网页在浏览器中的可视高度，
var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
//scrollTop是浏览器滚动条的top位置，
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//通过判断滚动条的top位置与可视网页之和与整个网页的高度来返回各项参数
if (scrollTop + clientHeight == htmlHeight) {
alert("htmlHeight:" + htmlHeight + "clientHeight" + clientHeight + "srolltop" + scrollTop);
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 实例

相关文章推荐

新的分享

章节导航