Vue.js imitates ele.me. What if the last item of the left-right linkage can't be scrolled?

as shown in the dynamic diagram, the left menu bar scrolls normally, but to the last, because the scrolling height does not reach the scrolling height of the item on the right, so when the currently active menu bar is not high enough, it will not always be highlighted normally because it is not high enough, and it is the same with scrolling feedback from the right to the left, which can not make the last menu active

. < hr > In fact,

is not limited to the last one, that is, the product label will not change the current active index until it passes to the left of the top of the container. As long as you scroll to the end, the first few tags are not high enough to update their active status. I wonder if the expression is clear? Has been bothered for most of the day, trying to solve

Mar.16,2021

if the height is not enough, increase the height.
if you let me do it, add a padding-bottom, value to the container on the right. Use the height of the container-the height of the last piece + N pixels


the idea should be like this:
the left menu bar, when clicked, should always add a highlight effect.
instead of just relying on the scrolling feedback on the right. In this way, even if you scroll to the bottom on the right and click on the corresponding menu on the left, it can still be highlighted.
just opened ele.me app, is the same idea.


add an identifier if it is a point, the priority is high, and replace the calculation attribute, use the function method to determine whether it is necessary to calculate the scrollY, click to set the index. The delay time is greater than the scrolling animation, and the identifier is returned to the original position in time when setting it, which does not affect the scrolling judgment


have you solved it? Can you take a look at the source code I also encountered this problem, thank you ~

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-1ea68e9-4f2b6.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-1ea68e9-4f2b6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?