通过点击tab切换scrollIntoView跳转到对应的位置

511 阅读1分钟

问题详述:在页面中,顶部是tabs,中间部分为每一个tab对应的模块,通过切换tab,使得页面滑动到该模块。 解决:首先,需要定义每个模块可被搜寻的标志,可通过ref以及id等方法标识每个模块。在点击tab时通过传入每个模块的标识,采用scrollIntoView进行跳转。同时,需要监听滚动事件,若滚动到每一模块,则需要对应改变对应tab的激活状态,具体代码实现如下:

tabs image.png

对应的模块,采用id的方式标识每一个模块 image.png

点击某个tab,通过scrollIntoView跳转到对应的模块 image.png

监听scroll事件,当滑动到该模块顶部处于屏幕上半部分,则认为是该模块被激活,将index赋值给active。其中,document.body.clientHeight是当前屏幕的高度。 image.png