html - 如何在反应js中自动滚动到nav-active

Question

我有问题我的标签滚动无法滚动到最后一个道具项目。例子 ：

我有 8 个索引选项卡，当我单击最后一个索引时，我得到了活动索引但没有滚动到我的最后一个索引，所以我必须手动滚动到我的最后一个索引。

这是我的 tabs.js

import Link from 'next/link'
import { string } from 'prop-types'

const orderTab = (props) => (
    <React.Fragment>
        <div className="nav-fixed scrollmenu col-xl-12 p-0 border-bottom pt-sm-2">
            <Link href="/a" as="/a">
                <a href="javascript:void(0);" className={props.selectedMenu=='a' ? "nav-active font-weight-bold aa" : "text-muted"}>A</a>
            </Link>
            <Link href="/b" as="/b">
                <a href="javascript:void(0);" className={props.selectedMenu=='b' ? "nav-active font-weight-bold aa" : "text-muted"}>B</a>
            </Link>
            <Link href="/c" as="/c">
                <a href="javascript:void(0);" className={props.selectedMenu=='c' ? "nav-active font-weight-bold aa" : "text-muted"}>c</a>
            </Link>
            <Link href="/d" as="/d">
                <a href="javascript:void(0);" className={props.selectedMenu=='d' ? " nav-active font-weight-bold aa" : "text-muted"}>d</a>
            </Link>
        </div>
    </React.Fragment>
)

orderTab.propTypes = {
    selectedMenu: string
}

export default orderTab

这是我的CSS

div.scrollmenu {
    direction: ltr;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  text-align: center;
  padding: 10px 30px 10px 30px;
  text-decoration: none;
}

在这里我的 ilustration 输出 在此处输入图像描述

标签： htmlcssreactjs