这是我参与「第四届青训营」笔记创作活动的第三天，今天想记录一下我在做项目时用到的点击引起盒子滚动以及盒子发生滚动时一些样式的变化。
需求简述
我们的项目有一个需求，点击左边栏的一些图标时，右侧的内容会滑到图标的对应内容；当右边大盒子滚动到每个模块时，左边栏对应该模块的图标样式会变化。
项目图片介绍
我的思路
我将它分成几个组件，最后把1号组件和2号组件放在该页面的最终vue文件里，在这里称为大组件，3号组件和4号组件放在2号组件里。
在1号组件里，给这些图标绑定点击事件，我把点击触发的函数放在了大组件里边，通过子传父的方式来完成点击事件。\
- 点击事件具体如下：在大组件里边获取3号组件和4号组件的
offsetTop,将点击的图标的索引与右边它的对应组件的索引对应起来，右边内容的最外层盒子使用元素的scrollTo属性，便能实现一点击就能滑到对应的版块。 - 滚动事件具体情况：在右边内容的最外层盒子上绑定滚动事件，假如滚动了就会触发函数执行。函数里边：获取右边内容的最外层盒子被卷去的高度，即
scrollTop,如果被卷去的高度>各个板块的offsetTop，那么就使从1号组件传过来的变量值发生变化，前提是有给1号组件的图标绑定动态样式，这个动态样式的绑定是通过传给大组件的变量值决定的。
点击事件的代码图
滚动事件的代码图
总结
一开始组件是分离的，也是多级的，实现起来会不会比较复杂，但是，我的担心是多余的，可以说基本不受组件分离的影响，实现起来也是很简单的，还是需要自己多操作，然后多积累经验。
