Question

我正在React中构建一个应用程序，该应用程序具有一个侧边栏，用户可以在其中使用键盘上的箭头滚动浏览该栏的元素。单击其中一个按钮时，该按钮将获得一个活动标签。当使用箭头四处走动时，我正在移动此活动课堂。问题是，如果我继续滚动并且列表足够长，则所选项目可能在侧栏的可见部分之外。如何使活动元素始终可见？谢谢！
我的html结构如下：

<div style="width: 10%; height: 100vh; overflow: hidden scroll;">
    <ul>
        <li>
            <button order="0" class="btn-block" type="button">test1
            </button>
        </li>
        <li>
            <button order="1" class="btn-block active" type="button">test2
            </button>
        </li>
        ...
    </ul>
</div>

Answer 1

通过在按钮上添加一个额外的ref字段并定义一个scrollTo函数（可通过按键处理程序调用）来解决。该函数如下：

int main(){    
    struct Student {    
        char Initials2[2];    
        int id;    
        struct Student *teammate;    
    };    
    typedef struct Student SType;    
    #define XYpt &class[0]    
    #define ABpt &class[1]    
    #define RSpt &class[2]    
    #define CDpt &class[3]    
    #define JVpt &class[4]    
    #define RYpt &class[5]    
    SType class[6] = {    
        {{'X','Y'},123, RSpt},    
        {{'A','B'},23, RYpt},    
        {{'R','S'},11, XYpt},    
        {{'C','D'},44, JVpt},    
        {{'J','V'},42, CDpt},    
        {{'R','Y'},457, ABpt}    
    };    

    return 0;    
}

如何使可滚动栏的活动元素始终可见？

1 个答案: