横向滚动的 li 被选中后跳转新页面，如何实现将选中的 li 定位到可视区域？

Question

以虎牙直播的头部标签效果为例
这里默认选中的是“首页”，当用户选中的是“星秀”时，跳转新页面，新页面的默认选中的是“星秀”，并且将原本排在右边隐藏的“星秀”定位到可视区域内，请问如何实现这个效果？
试过用定位实现，但是好像弄不了。

Answer 1

我找到问题所在了，我一直在想用设置 ul 的 position 定位来解决，用 left 去定位整行的位置，但其实这是一个内容滚动的问题，应该用 js 的 scrollTo 来将 x 轴滚动到相应的位置。感觉把事情搞复杂了......

Answer 2

首先定位是肯定要用，点击是可以拿到当前点击距离 首页 的距离（p）%可视区的宽度(s)。取余(v)。
如果是点击后的按钮一直居中。v-(s/2)移动的距离。
是整个行往前移动不是点击后的标签

Answer 3

element.scrollIntoViewIfNeeded() 可以试下这个API
Element.scrollIntoViewIfNeeded()

Answer 4

既然是公共组件，点击“星秀”的时候记下这个组件的偏移量，到下一个页面的时候重新定下位