html中滚动条的监听

最新推荐文章于 2024-06-01 15:00:43 发布

szc10

最新推荐文章于 2024-06-01 15:00:43 发布

阅读量4.6k

点赞数 1

分类专栏： HTML 文章标签： html 实例

本文链接：https://blog.csdn.net/szc2000/article/details/50365041

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>