html中滚动条的监听

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>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值