原⽣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获取当前滚动条的坐标位置，由于所有浏览器都⽀持
document.documentElement.，所以在本⽂中我们就没有在对是否是要使⽤document.documentElement.还是document.bod做判断，我们还需要取到id=menu下的a标签以及id=itemdetail节点下的类名为class=“itemarea`的节点，具体实现如下： scroll = function(){ //获取当前滚动条的位置 var top = document.documentElement.scrollTop; //获取id为menu节点下的a标签 var ElementById("menu").getElementsByTagName("a"); //取得id为itemdetail下类名为itemarea的节点 var itemarea = ElementById("itemdetail").getElementsByClassName("itemarea"); var currentId = ""; //存放当前位置的id }
然后，对于邹策的每⼀个类名为class=“itemarea的节点offsetTop属性(主要是判断当前元素顶部相对于上层控件的偏移量)如果当前滚动条的坐标位置⼤于offsetTop得到的值，在把当前节点的id存下来。 for (var i =0; iitemTop-50){ currentId = itemarea[i].id; }else{ break; } }
如果此时的currentId已经有⼀个⾮空的值，我们就拿着这个值去逐⼀的与id=menu下的a标签中href属性作⽐较，如果currentId与href属性中的字符串是相等的，就说明，当前滚动条的位置应该与匹配到的`a标签对应，为： if(currentId){ //给正确的menu下的a元素class赋值 for (var i=0; i
此时，在页⾯上滚动滚动条得到的效果如下：
此时左侧的内容区域与右侧⾼亮显⽰的标签对应关系是正确的。js导航栏下拉菜单

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。