This topic created in 1524 days ago, the information mentioned may be changed or developed.
各位大佬：
想问一下这种餐厅点菜的 h5 中，侧边栏根据滑动动态切换到下一个 tab 的功能是怎么实现的，就是滑动到下一个分类后，侧边菜单自动也切换到下一个 tab
 |
1
keifer Mar 8, 2022  2
想到几个方案：
1. 基于 Intersection_Observer_API 检测元素出现在 viewport： https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API ； 2. 基于 scroll 事件，先计算好每个项目的 scroll 长度，根据 scroll 事件的值来切换左侧 tab 菜单； |
 |
2
3dwelcome Mar 8, 2022 1
DIV 很早就有个 scrollIntoView 方法，能直接滚动到视区内，我一直用这个。
但是不知道为什么，大部分网上教学都不用这个，而选用手动计算 scroll y 值。 我也是很不理解。 |
 |
3
dogsHappyDay Mar 8, 2022
@3dwelcome 大部分人都是 copy 来 copy 去的。
|
 |
4
love642285 OP @3dwelcome 请问用 scrollIntoView 这个方法有什么思路可以解决这个问题呀
|
|
5
3dwelcome Mar 8, 2022
@love642285 你应该给一楼点赞，我这个是用户选侧边栏，内容区域跳转到分类里第一个菜品。
一楼的 Intersection_Observer_API ，是第一个菜品在可视区内，给你一个回调函数，让你设置侧边栏的切换状态。 |
 |
6
agdhole Mar 8, 2022
一楼的方法就可以了，这玩意和 markdown toc 标记效果差不多。
但是也要看数据量，曾经遇到过巨量数据渲染的，这种滚动可能有性能问题。 |
 |
7
iNaru Mar 8, 2022
|
Select Language