Question

我开始使用TailwindCSS和ReactJS开发Web应用程序。在台式机上，一切正常且响应迅速。但是，当我上手机时，标题会“卡住”，并且我必须尝试滚动数次并以怪异的方式滚动到想要的位置。如何修改我的代码，使其与计算机上的代码一样平滑？

这里是version that isn't working，这里是expected result。

这是代码：

export default function AppLayout() {
    return (
        <div className="h-full sm:w-sm sm:mx-auto sm:p-12">
            <div className="overflow-y-scroll sm:overflow-y-hidden mx-auto h-full sm:border-white rounded sm:border-8 sm:flex-row flex flex-col">
                <Switch>
                    <Route exact path={["/app", "/app/assistant"]} component={SmartAssistant} />
                </Switch>
            </div>
        </div>
    )
}

export default function ActionPanel(props) {
    return (
        <div className="p-2 font-content flex-1 sm:h-full sm:w-2/4 bg-white flex-col flex justify-between sm:overflow-y-scroll">
            <div>
                {props.children}
                {props.children}
                {props.children}
                {props.children}
            </div>
            <div class="w-full justify-end flex flex-row">
                <FontAwesomeIcon size="2x" icon={faArrowRight} />
            </div>
        </div>
    )
}

export default function InfoPanel(props) {
    return (
        <div className="p-2 sm:h-full sm:w-2/4 bg-bbh text-center text-white font-display justify-between flex-col flex">
            <div>
                <h1 className="font-bold text-2xl">{props.title}</h1>
                <p className="hidden sm:block text-lg">{props.description}</p>
            </div>
            <p className="text-lg font-semibold">{props.instruction}</p>
        </div>
    )
}

我没有包括SmartAssistant组件，因为它仅调用ActionPanel和InfoPanel。如果有帮助，请查看full screen version。

为什么滚动在移动网络浏览器上“弹起”？

0 个答案: