原生js监听滚动条_原生JS实现滚动条监听

本文主要利用原生的javascript实现滚动条事件的监听，主要涉及的知识：

(1)利用React组件渲染一个UI页面

(2)实现锚点链接

(3)实现滚动条onscroll事件

其中,利用React渲染的UI延续了React状态提升中的内容，只是在这个基础上做了一点相应的修改

最终得到的DOM页面的结构如下：

(2)锚点链接：锚点是页面中的一种超链接，主要体现为：通过点击命名锚点，最终指向页面中的某一部分，也就是谁，下面我们将利用本文的实例解释锚点链接：

在上一个图中，如果我们点击右侧悬浮的导航栏中对应的体育，则左侧就指向相应的内容区域，同理，如果点击右侧的新闻，页面也将指向相应的内容区域。

在本次实例中，我们使用id做锚点链接，也就是说，右侧四个悬浮导航菜单中的href属性中#后的值要与左侧内容区域的id属性名相同，具体如下：

其中，用黑色粗实线框住的两个区域就是实线锚点链接的体现。

(3)实现滚动条onscroll事件

DOM的层次结构中，上图中的左侧被黑色粗线框住的三个div属于同一类，类名均为class=“itemarea

首先，我们利用document.documentElement.scrollTop获取当前滚动条的坐标位置，由于所有浏览