Почему моя прокрутка «подпрыгивает» в мобильном браузере? - PullRequest
Новая
       7

Почему моя прокрутка «подпрыгивает» в мобильном браузере?

0 голосов
/ 23 марта 2020

Я начал разработку веб-приложения, используя Tailwind CSS и ReactJS. На рабочем столе все работает правильно и идеально отзывчиво. Однако, когда я попадаю на мобильный, заголовок «застревает», и я должен попытаться прокрутить несколько раз и странным образом до go, где я хочу. Как я могу адаптировать свой код, чтобы он был таким же плавным, как на компьютере?

Вот версия , которая не работает , и это ожидаемый результат .

Вот код: 

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. Если это может помочь, вот полноэкранная версия .

...