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

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

阅读 3.2k
4 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏