html中滚动条的监听

来源：互联网发布：淘宝店铺门头图片编辑：程序博客网时间：2024/05/22 04:49

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>

0 0