javaScript滚动条事件的实例详解

JavaScript提供了一些与滚动条相关的事件，如
scroll事件，当用户滚动页面时，浏览器会触发这些事件，通过监听这些事件，我们可以实现一些有趣的功能，如监听页面滚动到底部自动加载更多内容等。,1、
scroll事件,当用户滚动页面时，浏览器会触发
scroll事件，我们可以通过以下方式监听这个事件：,2、
scrollTop属性,scrollTop属性表示元素垂直滚动的距离，如果一个元素的
scrollTop值为100，那么该元素向上滚动了100像素，我们可以通过以下方式获取或设置元素的
scrollTop值：,3、
scrollLeft属性,scrollLeft属性表示元素水平滚动的距离，如果一个元素的
scrollLeft值为100，那么该元素向左滚动了100像素，我们可以通过以下方式获取或设置元素的
scrollLeft值：,4、
scrollWidth和
scrollHeight属性,scrollWidth属性表示元素的内容宽度（包括看不见的部分），而
scrollHeight属性表示元素的内容高度（包括看不见的部分），我们可以通过以下方式获取这两个属性的值：,假设我们有一个列表，当用户滚动到列表底部时，我们希望自动加载更多内容，我们可以使用
scroll事件和
scrollHeight属性来实现这个功能：,
,window.addEventListener(‘scroll’, function() { // 在这里编写处理滚动事件的代码 });,var element = document.getElementById(‘myElement’); var scrollTop = element.scrollTop; // 获取元素的scrollTop值 element.scrollTop = 100; // 设置元素的scrollTop值,var element = document.getElementById(‘myElement’); var scrollLeft = element.scrollLeft; // 获取元素的scrollLeft值 element.scrollLeft = 100; // 设置元素的scrollLeft值,var element = document.getElementById(‘myElement’); var scrollWidth = element.scrollWidth; // 获取元素的scrollWidth值 var scrollHeight = element.scrollHeight; // 获取元素的scrollHeight值,<div id=”list”> <!列表内容 > </div> <div id=”loading” style=”display:none;”>加载中…</div>