Vue's mall sidebar label scrolls and highlights with the content. What is the idea?

the requirement is this: you want to implement a page similar to ele.me.
for example, the label on the left side of a store has "best-selling list", "drink" and "snack". Wait a minute. On the right is all the merchandise of the store. The desired effect is that when you slide the list of items on the right, when you slide to a label bar, the label corresponding to the left sidebar is highlighted. Of course, you can also directly slide the sidebar on the left, click to select the desired label, and smoothly scroll to the item on that label.
could you tell me how to implement this requirement, or are there any off-the-shelf components to learn from?

Mar.23,2021

location and navigation find out.

then there are DEMO, principles based on jQuery that are all the same:

Test case


the effect of linkage between left and right, ah, since you all know the example of ele.me, you should have a clear train of thought, that is, you can get the id, of the corresponding scrolling part through the scrolling height on the right. Just make the id on the left correspond to it


attach the connection https://blog.csdn.net/qq_4020.


bind the state on the left side through the corresponding id

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e392ab-44503.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e392ab-44503.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?