小白js原生左边控制右边元素滚动功能概念

#小白功能第一章js原生左边按钮控制右边滚动效果
大家好，今天来分享一下我今天做的一个小功能就是类似楼梯的美团楼梯效果

这个功能实现起来也是非常的简单先看一下布局是怎样的

这边我利用的是一个 overflow-y: scroll;让他的内容先进行一个滚动，左右盒子（这边说一下 overflow-y: scroll;这个属性它是让他的子元素进行滚动，而滚动元素必须是一个）都让滚动起来看css图



css具体就是这些没什么难的，你们具体看一下就明白了，说一下js也是我们关心的首先我们先获取一下左边的leftitems的部分循环遍历

 const oLi = document.querySelectorAll("li")

我这边用的ul，li直接获取一下就可以了这边有一个有一个口诀，一堆，多个，用循环，我们先循环一下这个获取过来的元素给每一个添加一个点击事件，说一下这个获取她获取的是一个数组类型，为了区分点击的是哪一个我们点击哪个给她换一个背景颜色，她的具体实现步骤也是十分的简单就是一个排他思想，先用获取的元素进行一个for循环给每一个添加事件，然后再继续一个for循环用前面哪个元素也行反正跟左边的数据对应就行然后把他的类名赋值为空然后在里面for循环外面再给她添加一个你定义颜色的类名然后差不多就可以实现了（选项卡的头部也是这样写的）

为什么要用let 这个涉及到一个块级作用域的概念，下次说你先这样写这样就实现了点击切换背景颜色了。然后在获取右边标签的offsetTop值，offsetTop(获取标签距离页面顶部高)，这边先进行一个获取右边所有滚动的元素标签，因为在之前for循环里面写，利用循环i获取左边跟右边对应的元素的offsetTop高使用一个方法scrollTo（）这个是原生帮你写好的实现元素滚动第一个参数要滚动的高第二个是左边滚动的距离，第三个就是他的类型就是他的样式你可以试试把刚刚获取，过来的对应元素的offset高设置到第一参数里面就可以实现点击左边，右边滚动啦给你看一下具体代码

希望能帮助到你，小白观看，大神勿喷
喜欢就关注吧，你学这个我帮你